已解决
vue element el-table-column 循环示例代码
来自网友在路上 183883提问 提问时间:2023-11-02 05:29:32阅读次数: 83
最佳答案 问答题库838位专家为你答疑解惑
如果你想循环生成多个el-table-column,可以使用v-for指令。以下是一个示例:
<template><el-table :data="tableData"><el-table-column v-for="column in columns" :key="column.prop" :label="column.label" :prop="column.prop"></el-table-column></el-table>
</template><script>
export default {data() {return {tableData: [{ name: 'John', age: 30, city: 'New York' },{ name: 'Jane', age: 25, city: 'London' },{ name: 'Tom', age: 35, city: 'Tokyo' }],columns: [{ label: '姓名', prop: 'name' },{ label: '年龄', prop: 'age' },{ label: '城市', prop: 'city' }]};}
};
</script>
在这个示例中,我们在el-table-column
上使用v-for
指令,将columns
数组循环遍历,生成多个el-table-column
。每个el-table-column
都绑定了相应的label
和prop
属性。tableData
是一个包含数据的数组,el-table
将使用这些数据来显示表格内容。
注意:这里的示例使用了Element UI中的el-table
和el-table-column
组件,如果你没有安装Element UI,需要先安装并引入Element UI。
查看全文
99%的人还看了
相似问题
猜你感兴趣
版权申明
本文"vue element el-table-column 循环示例代码":http://eshow365.cn/6-29921-0.html 内容来自互联网,请自行判断内容的正确性。如有侵权请联系我们,立即删除!