template 如何添加 el-table-column
时间: 2023-12-09 15:35:26 浏览: 119
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
可以使用以下代码向template中添加el-table-column:
```html
<template>
<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</template>
```
其中,el-table-column标签用于定义表格的列,prop属性用于指定数据源中的字段名,label属性用于指定列的标题。在上述代码中,我们还使用了一个嵌套的template标签来定义操作列,其中slot-scope属性用于指定作用域插槽的变量名,scope.$index和scope.row分别表示当前行的索引和数据对象。
阅读全文