element-ui 使用自定义复选框

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

自带复选框无法确定数据来源于回填还是用户手动选择，因为回填表格复选框时只能使用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-ui 使用自定义复选框相关推荐

vue element ui 获取,判断复选框选中的值
<el-form-item label="某某字段"><el-checkbox-group v-model="form.字段名">< ...
django获取html复选框,扩展Django Admin tabular.html自定义复选框操作
我有两个表被告和被告_Potential class Defendant(models.Model): fullname = models.CharField(max_length = 100, nu ...
html制作复选框,html自定义复选框
自定义复选框的素材: icon-check-circle.png icon-checked.png checkbox.html(为了方便起见,这里使用到了jQuery) 自定义复选框checkbox ...
el-checkbox 自定义复选框【多选框】
1. 自定义多选框 el-checkbox; 预览: 注意: 假如有全局字体引入会影响显示效果: 去除el-checkbox__inner附加字体css font-family: not speci ...
给element的select添加复选框
需求:要求给select多选的时候,给下拉框前加上复选框样式 element select原样式需要更改后的样式 html <el-selectv-model="searchObj. ...
自定义复选框checkbox样式
复选框作为网页中比较常见的一个组件,有的时候我们需要对它进行美化,但是我们无法直接为其定义样式,所以我们需要一些其它的办法. 表单元素中有label 元素和 for属性,当我们点击label 标签时, ...
自定义复选框,复选框样式修改,重写复选框
查了好多资料复选框写的磨磨叽叽的一大堆废话! 我来教大家写一个原生jq的复选框样式,简单实用,又不会耽误checkbox的调用. html: <label class="checkli ...
微信小程序自定义复选框
微信官方给的复选框太丑,想要样式多样需要我们自己定义先来张效果图 wxml循环生成选框,从js里取数据,根据checked的值,改变标签的样式类 <view class="two { ...
Android CheckBox 复选框（自定义复选框）
一.正常使用代码  <CheckBoxandroid:id="@+id/man"android:layout_width=&q ...

element-ui 使用自定义复选框

element-ui 使用自定义复选框相关推荐

最新文章

热门文章