vue+elementui实现表头根据后台数据动态生成字段
有时需求涉及表头动态加载 ,肯定是涉及渲染了 代码如:cols: [{ label: "节点编号", prop: "node", type: "normal" },{ label: "名称", prop: "name", type: "normal" },{ label: &qu
·
有时需求涉及表头动态加载 ,肯定是涉及渲染了
代码如:
cols: [
{ label: "节点编号", prop: "node", type: "normal" },
{ label: "名称", prop: "name", type: "normal" },
{ label: "类型", prop: "type", type: "sort" },
{ label: "坐标", prop: "coordinate", type: "normal" }
]
prop属性设定的值肯定是表头绑定的 属性,表格数据当然是以prop值作为绑定表格属性
<template>
<div>
<el-table class="tb-edit" highlight-current-row :data="tableData" style="width: 100%">
<template v-for="(col ,index) in cols">
<el-table-column v-if="col.type==='normal'" :prop="col.prop" :label="col.label"></el-table-column>
<el-table-column v-if="col.type==='sort'" :prop="col.prop" sortable :label="col.label">
<template scope="scope">
<el-tag type="primary">{{ scope.row.type }}</el-tag>
</template>
</el-table-column>
</template>
</el-table>
<br>数据:{{tableData}}
</div>
</template>
<script>
export default {
data() {
return {
// cols prop属性值都是作为 tableData的属性
cols: [
{ label: "节点编号", prop: "node", type: "normal" },
{ label: "名称", prop: "name", type: "normal" },
{ label: "类型", prop: "type", type: "sort" },
{ label: "坐标", prop: "coordinate", type: "normal" }
],
tableData: [
{
node: "0051",
name: " 机库顶",
type: "UWB",
status: "正常",
coordinate: "12.21,34.45,34.6"
},
{
node: "0061",
name: "机库门",
type: "GPS",
status: "低电",
coordinate: "45.41,67.45,78.6"
}
]
};
},
methods: {
handleCurrentChange(row, event, column) {
console.log(row, event, column, event.currentTarget);
},
handleEdit(index, row) {
console.log(index, row);
},
handleDelete(index, row) {
console.log(index, row);
}
}
};
</script>
更多推荐
已为社区贡献14条内容
所有评论(0)