一、如何实现表格的列有复选框,并且表头复选框后有文字
- 给表格每行加复选框,在需要加复选框的列上加
type="selection"
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-upload2” size="mini" @click="exportSelectedExcel">导出</el-button>
<el-checkbox -model="al1Check” @change="al1CheckEvent”style="margin-left:10px;">全选所有</el-checkbox》
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getPagelist"></right-toolbar>
</el-row>
<el-checkbox v-model="allCheck" @change="allCheckEvent">全选所有</el-checkbox>
<el-table
ref="table"
:data="tableData"
tooltip-effect="dark"
:row-key="rowKey"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
:reserve-selection="true"
:selectable="checkSelectable"
width="55"></el-table-column>
<el-table-column label="机构" width="120"> </el-table-column>
...
</el-table>
...
- 想在表头复选框后加文字,用css就可以实现
::v-deep .el-table__header-wrapper .el-checkbox__input::after{
content:全选;
position: absolute;
margin-left: 5px;
}
二、点击全选所有,分页的都要回显被选中
给el-table加@selection-change="handleSelectionChange"
,给有复选框的那一列加:reserve-selection="true" :selectable="checkSelectable"
方法如下:
export default {
data () {
return {
tableData:[]
idList: [],//所有选中的数据包含跨分页数据
allCheck: false,
rowKey(row) {
//唯一字段名称
return row.id
}
}
},
created(){
//获取初始表格数据
},
methods: {
...
// 分页全选-选中框改变事件
handleSelectionChange (val) {
// 数据去重
this.idList = this.reduceSame(val);
// 选中所有选择框时勾选全选按钮
if (this.idList.length == this.total) {
this.allCheck = true;
}
// 将row是对象数组数据转换为字符串
this.idList= this.idList.map(function (val) {
return val.id;
});
// 选中后的数据,将选中的id放在一个数组传给后端
console.log(this.idList)
},
// 数组对象去重
reduceSame: function (arr) {
let obj = {};
return arr.reduce(function (prev, item) {
obj[item.id] ? "" : (obj[item.id] = 1 && prev.push(item))
return prev
;
}, []);
},
// 分页全选-全选按钮change事件
allCheckEvent () {
let _this = this;
if (_this.allCheck) {
// 全选选中时当前页所有数据选中
_this.lists.forEach(row => {
if (row) {
_this.$refs.table.toggleRowSelection(row, true);
}
});
} else {
_this.$refs.table.clearSelection();
}
},
// 分页全选-全选时禁用选择框
checkSelectable (row, index) {
return !this.allCheck;
},
},
watch: {
// 分页全选-监听数据变化
tableData: {
handler (value) {
if (this.allCheck) {
this.tableData.forEach(row => {
if (row) {
this.$refs.table.toggleRowSelection(row, true)
}
});
}
},
deep: true
}
},
}