el-table-colum表中动态绑定tag标签(简单的一种)
在Vue中,你可以使用v-bind
或简写:
来动态绑定属性,包括class和tag。以下是一个示例,展示如何在el-table-column
中动态绑定tag:
<template>
<el-table :data="tableData">
<el-table-column
v-for="column in columns"
:key="column.prop"
:prop="column.prop"
:label="column.label">
<template slot-scope="scope">
<!-- 动态绑定tag -->
<component :is="column.tag" :text="scope.row[column.prop]"></component>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
// ...
],
columns: [
{
prop: 'name',
label: 'Name',
tag: 'el-tag' // 指定要使用的element-ui标签
},
// ...
]
};
}
};
</script>
在这个例子中,columns
数组定义了表格列的信息,包括每列的prop
(对应数据项属性)、label
(列名)和tag
(要使用的动态标签)。在el-table-column
的插槽中,我们使用component
元素和:is
绑定来动态渲染指定的tag。这里的scope.row[column.prop]
是当前行的对应属性值,它将作为子组件的prop。
确保你有相应的Element UI库和Vue组件基础设施。这个例子假设你已经在项目中安装了Element UI,并且你的Vue项目能够正常运行。
评论已关闭