element ui 树形表格 + 复选框事件

最新推荐文章于 2024-04-02 14:36:29 发布

yuhuamei

最新推荐文章于 2024-04-02 14:36:29 发布

阅读量892

点赞数

分类专栏： vue elementUI 前端文章标签： vue 前端 elementui

原文链接：https://blog.csdn.net/whn1231/article/details/123567224

版权

前端同时被 3 个专栏收录

28 篇文章 0 订阅

订阅专栏

vue

18 篇文章 1 订阅

订阅专栏

elementUI

9 篇文章 0 订阅

订阅专栏

<el-table
	ref="batchingOrderDetailTable"
	:data="tableData"
	border
	style="width: 100%"
	:height="tableHeight"
	size="mini"
	:default-sort = "{prop: 'levelNo', order: 'ascending'}"
	:header-cell-style="{ fontSize: '13px' }"
	row-key="keyId"
	default-expand-all
	:tree-props="{children: 'itemList'}"
	:row-class-name="tableRowClassName"
	@selection-change="handleSelectionChange">
>
	<el-table-column width="105" fixed>
        <template slot="header" slot-scope="scope">
          <span>全选</span>
          <el-checkbox v-model="checkouts" style="padding-left:10px" @change="checkAllIn(scope)" />
        </template>
        <template slot-scope="scope">
          <el-checkbox
            v-model="scope.row.checks"
            style="padding-left:10px"
            @change="checkChange(scope.row)"
          />
        </template>
    </el-table-column>
</el-table>

checkAllIn() {
    this.$refs.batchingOrderDetailTable.data.forEach((items) => {
      this.$set(items, 'checks', this.checkouts);
      if (items.itemList) {
        this.setChildren(items.itemList, this.checkouts);
      }
    });
    this.multipleSelection = [];
    this.selectionList(this.tableData);

  },
setChildren(children, type) {
     children.forEach(j => {
        this.$set(j, 'checks', type);
        if (j.itemList) {
          this.setChildren(j.itemList, type);
        }
      });
    },
    selectionList(list) {
      list.forEach(item => {
        if (item.checks && !item.itemList && item.coreWorkOrderNo) {
          this.multipleSelection.push(item);
        }
        if (item.itemList) {
          this.selectionList(item.itemList);
        }
      });
    },
    // 插槽复选框逻辑
    checkChange(row) {
      // 父选子
      if (row.itemList) {
        this.setChildren(row.itemList, row.checks);
      }
      // 子不带父
      this.multipleSelection = [];
      if(this.tableData){
      	this.selectionList(this.tableData);
      }
    },