如何用代码实现el-table多列多选按钮
时间: 2023-10-18 18:22:11 浏览: 91
el-table无限滚动+控制列是否显示+列排序(非json)
5星 · 资源好评率100%
你可以在el-table组件中使用el-table-column来定义每一列,然后在column中使用el-checkbox来实现多选按钮。具体代码如下:
```html
<el-table
:data="tableData"
:header-cell-style="{background:'#f3f3f3'}"
style="width: 100%">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="name"
label="名称"
width="180">
</el-table-column>
<el-table-column
prop="age"
label="年龄"
width="80">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
```
在以上代码中,我们通过type="selection"来在第一列中实现多选按钮。该列可以通过width属性来设置按钮宽度。其他列可以通过prop属性设置数据源key,通过label属性设置表头名称,通过width属性设置列宽度。具体实现也可以通过JavaScript或Vue组件等方式来实现,以上只是一种可行的方式。
阅读全文