一. 实现表格多选框
1.首先要想在表格中实现多选:需要手动添加一个el-table-column,设type属性为selection即可;默认情况下若内容过多会折行显示,若需要单行显示可以使用show-overflow-tooltip属性,它接受一个Boolean,为true时多余的内容会在 hover 时以 tooltip 的形式显示出来。
<el-table
ref="multipleTable"
:data="tableData3"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
label="日期"
width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column
prop="address"
label="地址"
show-overflow-tooltip>
</el-table-column>
</el-table>
二. 由于后台返回数据某些字段要求需默认选中
难点及坑:axios请求后端数据成功时,初始化表格的时候,使用el-table的toggleRowSelection()方法设置勾选框状态一直设置失败
1.如果字段SIGN_STAT为已签署则默认选中,其中row为数据每一项,第二参数为true则为选中,否则默认为没选中
SelectionChange() {
this.$nextTick(() => {
let table = this.tableData3; // 从后台获取到的数据
table.forEach(row => {
if (row.SIGN_STAT == "已签署")
this.$refs.multipleTable.toggleRowSelection(row, true);
});
});
},
2.此方法在生命钩子函数中调用
mounted() {
this.SelectionChange();
},
3.注意需要在el-table上面绑定ref=“multipleTable”
<el-table
ref="multipleTable"
:data="tableData3"
@selection-change="handleSelectionChange"
@select='selectSingle'
border
>
三. 默认选中后的不可取消
1.给el-table添加 @select事件,该事件表示当用户手动勾选数据行的 Checkbox 时触发的事件,第一个参数为选中的数据,第二个参数为是否选中true或者false
<el-table
ref="multipleTable"
:data="tableData3"
@selection-change="handleSelectionChange"
@select='selectSingle'
border
>
2.此事件又自动调用了上面提到的初始化自动默认勾选方法,即可完成默认选中并且不可取消
selectSingle(selection,row){
if(row.SIGN_STAT == "已签署"){
this.SelectionChange()
}
},
四. 禁用状态
1.给el-table-column添加selectable方法,仅对 type=selection 的列有效,类型为 Function,Function 的返回值用来决定这一行的 CheckBox 是否可以勾选
<el-table-column type="selection" width="95" :selectable="selectEnable" disabled="true"></el-table-column>
2.如下,如果数据某一条满足条件返回false可以选中,否则为true禁用
//非已签署状态不可选中
selectEnable(row, rowIndex) {
if (row.SIGN_STAT !== "已签署") {
return false;
}
return true;
},
**总结:
1、如果是表格中一开始没有数据,需要通过请求接口获取数据或者从其他途径获取数据的话, 那么一定要记得再获取完数据之后使用this.nextTick(),在this.nextTick(),在this.nextTick()的回调中使用el-table的toggleRowSlection()方法来设置勾选框的勾选状态 2、如果是静态数据的话,则可以直接使用el-table的toggleRowSlection()方法来设置勾选框的勾选状态**