1、问题：表格可以多选/单选 分页的时候 表格数据能进行回显
type="selection"可以设置表格进行多选 row-key 指定数据的 Key，用来优化 Table 的渲染
@select单选的事件 @select-all多选的事件 这两个事件用于多选使用
@selection-change="handleSelectionChange"这一个事件 是单选使用的 二选一
2.能实现的效果 一.表格多选 和 表格多选进行回显 二.表格单选 和 表格单选进行回显
<el-tablev-loading="loading":data="tableData"borderstyle="width: 100%; margin-right: 20px"class="typeTable"ref="typeTable"row-key="getRowKeys"@select="handleCheckBox"@select-all="handleSelectAll"@selection-change="handleSelectionChange"><el-table-column type="selection" width="55" align="center" fixed /></el-table>data() {return {tableData: [], selectExportId: [], // 多选表格的id}methods:{getRowKeys(row) {return row.id;},// 这两个事件 注意 @select="handleCheckBox" @select-all="handleSelectAll"// 单个选中 方法 多选单选都是这个 handleCheckBox(rows, row) {if (this.selectExportId.find((i) => i === row.id)) {this.selectExportId = this.selectExportId.filter((i) => i != row.id);} else {this.selectExportId.push(row.id);}},// 全选方法handleSelectAll(rows) {if (rows.length) {rows.forEach((row) => {if (!this.selectExportId.find((item) => item == row.id)) {this.selectExportId.push(row.id);}});} else {this.tableData.forEach((row) => {this.selectExportId = this.selectExportId.filter((item) => item != row.id);});}},// 请求方法getTableData(){请求接口.then(res=>{const { rows, total, pageNum } = res.data;this.tableData = rows;this.total = total;this.pages.pageNum = pageNum;this.loading = false;this.$nextTick(() => {// 选中的表格 多选 回显的方法 根据id进行回显的this.tableData.forEach((item, index) => {if (this.selectExportId.findIndex((i) => i === item.id) >= 0) {this.$refs.typeTable.toggleRowSelection(this.$refs.typeTable.data[index],true);}// 选中的表格行 单选 回显的方法 两个留一个 看需求const index = this.tableData.findIndex((i) => i.id === this.selectExportId);if (index >= 0) {this.$refs.typeTable.toggleRowSelection(this.$refs.typeTable.data[index],true);}});});})},// 单选的选中事件 如果单选的话 把下面的样式也写上 隐藏表头全选handleSelectionChange(selection) {if (selection.length > 1) {this.$refs.typeTable.clearSelection();this.$refs.typeTable.toggleRowSelection(selection.pop());} else if (selection.length === 1) {this.selectExportId = selection[0].id;}},}// 将表头全选按钮 进行隐藏 不让全选<style scoped lang="scss">.typeTable {::v-deep .el-table__fixed-header-wrapper {.el-table-column--selection {.el-checkbox {display: none !important;}}}}
