el-table动态生成二维表格,并且表头和表列为图标
时间: 2023-08-11 18:03:48 浏览: 137
动态生成表格
要动态生成el-table的二维表格,并且使用图标作为表头和表列,可以使用el-table-column组件并结合自定义的作用域插槽来实现。
首先,需要定义一个二维数组的数据结构和对应的图标数组:
```javascript
data() {
return {
tableData: [
['A', 'B', 'C'],
['D', 'E', 'F'],
['G', 'H', 'I']
],
iconData: [
'el-icon-user',
'el-icon-goods',
'el-icon-message'
]
}
}
```
然后,在模板中使用el-table组件,并使用v-for指令动态生成表头和表格数据,并在作用域插槽中使用图标作为表头和表列的内容:
```html
<el-table :data="tableData">
<el-table-column v-for="(row, rowIndex) in tableData" :key="rowIndex">
<template slot="header" slot-scope="scope">
<i :class="iconData[scope.$index]"></i>
</template>
<template slot-scope="{ row }">
<el-table-column v-for="(cell, cellIndex) in row" :key="cellIndex">
{{ cell }}
</el-table-column>
</template>
</el-table-column>
</el-table>
```
在这个例子中,我们使用v-for指令遍历二维数组的每一行,并使用el-table-column动态生成每一行的表头。然后,在作用域插槽中使用iconData数组中对应位置的图标作为表头的内容。
接着,在每一行的作用域插槽中,再使用v-for指令遍历该行的每一个单元格,并使用el-table-column动态生成每一列的表头和数据。
最终效果就是一个动态生成的二维表格,表头和表列都使用了图标作为内容。
完整的代码示例:
```html
<template>
<el-table :data="tableData">
<el-table-column v-for="(row, rowIndex) in tableData" :key="rowIndex">
<template slot="header" slot-scope="scope">
<i :class="iconData[scope.$index]"></i>
</template>
<template slot-scope="{ row }">
<el-table-column v-for="(cell, cellIndex) in row" :key="cellIndex">
{{ cell }}
</el-table-column>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
['A', 'B', 'C'],
['D', 'E', 'F'],
['G', 'H', 'I']
],
iconData: [
'el-icon-user',
'el-icon-goods',
'el-icon-message'
]
}
}
}
</script>
```
这样就可以实现一个动态生成的二维表格,表头和表列都使用了图标作为内容。
阅读全文