el-table 和el-table-column动态生成 每一列都是button
时间: 2023-10-14 10:29:12 浏览: 94
好的,根据您的要求,您可以通过以下代码动态生成 el-table 和 el-table-column,并且每一列都是 button:
```html
<template>
<el-table :data="tableData">
<el-table-column v-for="item in columns" :key="item.prop" :prop="item.prop" :label="item.label">
<template slot-scope="scope">
<el-button>{{ scope.row[item.prop] }}</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: 'John', age: 24, job: 'Developer' },
{ name: 'Jane', age: 29, job: 'Designer' },
{ name: 'Bob', age: 30, job: 'Product Manager' },
],
columns: [
{ prop: 'name', label: 'Name' },
{ prop: 'age', label: 'Age' },
{ prop: 'job', label: 'Job' },
],
};
},
};
</script>
```
这段代码中:
- `el-table` 组件接受一个 `tableData` 的数组作为数据源;
- `el-table-column` 组件根据 `columns` 的数组动态生成列,并且每一列的内容是 `scope.row[item.prop]`,即当前行的该列属性值;
- `el-button` 组件用来渲染每一列的内容。
阅读全文