vue+element ui实现树形表格加复选框（checkbox）

element ui中有带复选框的表格和树形数据的表格，不过呢，wo遇到一个新的需求，其中就是要实现树形表格和复选框的结合，尝试过很多方法，最后自己总结出一套，实现了全选，单选，多选。

效果图：

代码部分

 <el-tableref="multipleTable":data="tableData"style="width: 100%"row-key="domainId":default-expand-all="true":tree-props="{hasChildren: 'hasChildren',children: 'domainInfoLists',}"><el-table-column width="105"><template slot="header" slot-scope="scope"><el-checkboxv-model="checkouts"style="padding-left: 10px"@change="checkAllIn(scope)"/></template><template slot-scope="scope"><el-checkboxv-model="scope.row.checks"style="padding-left: 10px"@change="checkChange(scope.row)"/></template></el-table-column><el-table-columnv-for="(item, index) in tableList":key="index + 'a'":label="item.label":prop="item.prop"align="right"></el-table-column></el-table>

  searchMap: {},type: 0,quDataValue: "A",queryType: 0,queryValue: "A",tableData: [],domainInfoLists: [],mapData: [],haschild: true,checkouts: false,tableList: [{label: "",prop: "domain",},{label: "主机记录",prop: "hostRecord",},.........]

 //总全选checkAllIn() {this.$refs.multipleTable.data.map((items) => {this.$set(items, "checks", this.checkouts);if (items.domainInfoLists) {items.domainInfoLists.forEach((item) => {this.$set(item, "checks", this.checkouts);this.mag = this.checkouts;});}});},//插槽复选框逻辑checkChange(row) {// 父选子this.searchMap.domainInfoIds = [];if (row.domainInfoLists) {if (row.checks) {row.domainInfoLists.map((item) => {this.$set(item, "checks", true);});this.$set(row, "checks", true);this.mag = true;} else {row.domainInfoLists.map((item) => {this.$set(item, "checks", false);});this.$set(row, "checks", false);}}// 子带父this.mapData = [];this.tableData.map((items) => {let sonData = [];items.domainInfoLists.map((val) => {if (val.checks === true) {this.mag = true;sonData.push(val);this.searchMap.domainInfoIds.push(val.domainId);if (sonData.length === items.domainInfoLists.length) {this.$set(items, "checks", true);if (items.checks) {this.mag = true;this.mapData.push(items);if (this.mapData.length === this.tableData.length) {this.checkouts = true;}}}}});});//子空父空if (!row.checks) {this.checkouts = false;this.tableData.map((ite) => {if (ite.domainInfoLists) {ite.domainInfoLists.map((items) => {if (!items.checks) {this.$set(ite, "checks", false);}});}});this.tableData.every((ite) => {if (ite.domainInfoLists) {ite.domainInfoLists.every((items) => {if (!items.checks) {this.mag = false;}});}});}},

如果大家有更好的方法，欢迎指教！！！！！

vue+element ui实现树形表格加复选框（checkbox）相关推荐

element表格实现树形全选_vue+element UI实现树形表格带复选框的示例代码
一:在component文件夹下新建如下treeTable文件夹,里面有2个文件: eval.js:将数据转换成树形数据 /** * @Author: jianglei * @Date: 2017-1 ...
layui添加复选框_layui表格数据复选框回显设置方法
layui2.3版本,本身并不带有复选框回显功能,那么需要从源头解决此事,F12代码调试,找到与复选框关联的地方发现: 我们只需要在渲染数据回调时找到每个复选框根据数据的不同来设置回显. layui这 ...
为tableview添加带控件的单元格如复选框checkbox与combbox单元格
我们常常会有这样的需求,为QTableView增加复选框checkbox和选择下拉框combbox,毕竟依靠键盘输入不是很好约束其规范性.下面我们逐个来介绍.完成之后的效果如下: 一.准备TableV ...
html5复选框样式,11种炫酷CSS3复选框checkbox样式美化效果
这是一款效果非常酷的CSS3复选框checkbox样式美化效果.该复选框美化效果共有11种.默认的复选框的样式十分不好看,该效果将复选框加一美化,带上了一些动画效果,其中一些制作为滑动按钮的样式. 使 ...
JQuery实现复选框CheckBox的全选、反选、提交操作
对复选框最基本的应用,就是对复选框进行全选.反选和提交等操作.复杂的操作需要与选项挂钩,来达到各种级联反应效果. [示例]使用Jquery实现复选框CheckBox的全选.反选.提交操作. (1)创建 ...
jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等
jQuery操作复选框checkbox技巧总结 --- 设置选中.取消选中.获取被选中的值.判断是否选中等一.checked属性定义先了解下input标签的checked属性: 1.HTML &l ...
使用CSS3美化复选框checkbox
我们知道HTML默认的复选框样式十分简陋,而以图片代替复选框的美化方式会给页面表单的处理带来麻烦,那么本文将结合实例带您一起了解一下使用CSS3将复选框checkbox进行样式美化,并且带上超酷的滑动 ...
使用easyui框架form控件，单选按钮radio或复选框checkbox样式问题
为什么80%的码农都做不了架构师?>>> easyui只提供了textbox文本框,未提供单选按钮radio或复选框checkbox控件,在使用过程中,会存在单选按钮radio ...
MFC复选框CheckBox使用 ++
MFC中复选框checkbox控件,至少有四种方法对其进行操作, 第一种是利用Cbutton成员函数GetCheck和SetCheck, 第二种是利用CWnd成员函数IsDlgButtonChecke ...

vue+element ui实现树形表格加复选框（checkbox）

vue+element ui实现树形表格加复选框（checkbox）相关推荐

最新文章

热门文章