element

admin管理员组

文章数量:1122850

element

为什么不使用自带复选框？

自带复选框无法确定数据来源于回填还是用户手动选择，因为回填表格复选框时只能使用toggleRowSelection方法来遍历回填，而且会触发selection-change事件，而手动添加也会触发selection-change事件，无法判断某个选中数据来源于回填还是用户手动选择。

无法满足某些需要，

需求也挺奇葩，表格选择完后下方有个开关，每次提交开关状态需要独立，第一次选了1,2,5以及开关为关，再次打开时(第二次)回填1，2,5，且保存每一行的开关状态，再选3,4，6时开关打开，此时数据应该为1,2,5,关且3,4，6为开。如果第二次选择3,4,5.此时数据为：1，2为关，3,4,5为开

无法满足的需求简单讲就是：之前数据未变更保留原来的状态，有变更（取消/取消在选中）则使用新状态。

具体实现功能：

单选，多选，跨页选，半选,

详见代码入选

<template><div class="main-content"><!-- 使用自己的表格多选系统 --><el-tableref="multipleTable":data="tableData"tooltip-effect="dark"style="width: 100%"><el-table-column width="120"><!-- slot-scope="scope"这个不能少,不然checkbox会存在问题 --><template slot="header" slot-scope="scope"><el-checkboxv-model="checkAll"@change="handleAllChange":indeterminate="isIndeterminate">全选</el-checkbox></template><template slot-scope="{ row }"><el-checkbox@change="handleSelectChange($event, row)":value="checkIds.includes(row.shopId)"></el-checkbox></template></el-table-column><el-table-column label="shopId" width="120"><template slot-scope="scope">{{ scope.row.shopId }}</template></el-table-column><el-table-column prop="shopName" label="姓名" width="120"></el-table-column></el-table><div class="pagebox pall15"><div class="eboss-row mt20 justify-center"><div class="page-scroll"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="pageIndex":page-sizes="pageSizes":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="totalCount"></el-pagination></div></div></div></div>
</template><script>
import mock from "mockjs";
export default {name: "tableListDemo",desc:"不使用表格自带的勾选,使用自定义勾选",data() {return {totalCount: 0,pageIndex: 1,pageSize: 10,pageSizes: [10, 20, 30, 40],tableData: [],checkIds: [],//选中的id,可包含跨页数据checkAll: false,//当页的全选按钮状态isIndeterminate: false,//当页全选按钮的半选状态};},mounted() {this.queryList();},methods: {queryList() {let params = {pageIndex: this.pageIndex,pageSize: this.pageSize,};const res = mock.mock({success: true,model: {"shopList|3": [{shopId: "@id",shopName: "@cname",},],},pageIndex: 1,totalCount: 500,pageSize: 10,});res.model.shopList.unshift(...[{shopId: 8888,shopName: 8888,},{shopId: 9999,shopName: 9999,},]);console.log("mockData--", res);if (res.success) {this.totalCount = res.totalCount;this.tableData = res.model.shopList;} else {this.$alert(res.errorMessage, "提示");}},handleSizeChange(pageSize) {this.pageSize = pageSize;this.pageIndex = 1;this.queryList();},handleCurrentChange(pageIndex) {this.pageIndex = pageIndex;this.queryList();},// 行内单选选择handleSelectChange(e, row) {if (e == true) {// 从未选中==>选中this.checkIds.push(row.shopId);} else {let index = this.checkIds.findIndex((e) => e == row.shopId);this.checkIds.splice(index, 1);}const currentTableIds = this.tableData.map((e) => e.shopId);const currentTableCheckedIds = currentTableIds.filter((e) =>this.checkIds.includes(e));this.checkAll = currentTableCheckedIds.length == currentTableIds.length;this.isIndeterminate =currentTableCheckedIds.length > 0 &&currentTableCheckedIds.length < currentTableIds.length;},// 页内全选选择handleAllChange(e) {const currentTableIds = this.tableData.map((e) => e.shopId);this.isIndeterminate = false;if (e == true) {// 从未选中==>选中let ids = this.checkIds.concat(currentTableIds);// id需去重this.checkIds = [...new Set(ids)];} else {// 取消勾选,从选中id列表里把当前页的所有id均移除this.checkIds = this.checkIds.filter((e) => {return !currentTableIds.includes(e);});}},},
};
</script><style scoped lang="less"></style>

本文标签： element