el-table 多选框左侧
时间: 2023-10-03 22:04:51 浏览: 109
el-table-infinite-scroll:El-Table无限滚动
5星 · 资源好评率100%
1. 在 el-table 组件中,可以通过设置 `show-checkbox` 属性来显示多选框。
2. 多选框默认显示在表格的第一列,可以通过设置 `selection-column-width` 属性来调整多选框列的宽度。
3. 如果想要将多选框显示在表格的其他列,可以使用自定义列模板的方式来实现。具体做法如下:
(1) 在 el-table-column 中设置 `type` 属性为 `selection`,表示这是一个多选框列。
(2) 在 el-table-column 中设置 `width` 属性来调整多选框列的宽度。
(3) 使用 slot-scope 来自定义多选框列的内容,具体做法如下:
```
<el-table-column type="selection" width="100">
<template slot-scope="{row}">
<el-checkbox v-model="checkedRows" :label="row"></el-checkbox>
</template>
</el-table-column>
```
在上面的例子中,`checkedRows` 是一个数组,用来存储选中的行数据。在 slot-scope 中,我们可以访问到当前行的数据 `row`,并将其作为多选框的 label 属性绑定到 el-checkbox 上,以便在选中时能够获取到选中的行数据。
阅读全文