vue+element-ui 表格嵌套表格实现和勾选问题解决

vue+element-ui 表格嵌套表格实现和勾选问题解决

1.实现表格嵌套表格

主要是根据element-ui提供的type="expand"属性来实现，数据都是写死的数据哈~~~

<template>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="children" type="expand">
            <template slot-scope="slots">
                <el-table :data="slots.row.children" style="width: 100%">
                    <el-table-column
                        type="selection"
                        width="50"
                        show-overflow-tooltip
                        reserve-selection
                    />
                    <el-table-column label="11" prop="id" />
                    <el-table-column label="22" prop="name" />
                </el-table>
            </template>
        </el-table-column>
        <el-table-column
            type="selection"
            width="50"
            show-overflow-tooltip
            reserve-selection
        />
        <el-table-column label="单号" prop="id" />
        <el-table-column label="名称" prop="name" />
        <el-table-column label="价格" prop="price" />
        <el-table-column label="总数量" prop="num" />
    </el-table>
</template>

<script>
export default {
    data() {
        return {
            tableData: [
                {
                    id: "1298712333232",
                    name: "花甲",
                    price: "15.9",
                    num: "888",
                    children: [
                        { id: "1", name: "随便" },
                        { id: "2", name: "随便2" }
                    ]
                },
                {
                    id: "1489033233442",
                    name: "鸡翅",
                    price: "152.9",
                    num: "18",
                    children: [
                        { id: "1", name: "随便" },
                        { id: "2", name: "随便2" }
                    ]
                },
                {
                    id: "1093443434",
                    name: "鸡腿",
                    price: "23.98",
                    num: "38",
                    children: [
                        { id: "1", name: "随便" },
                        { id: "2", name: "随便2" }
                    ]
                },
                {
                    id: "19232243434",
                    name: "小面包",
                    price: "10.8",
                    num: "30"
                }
            ]
        }
    }
}
</script>
<style>
.demo-table-expand {
    font-size: 0;
}
.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
</style>

children中有数据正常显示，没有数据展示"暂无数据"。

问题：选择框中，二级表全部选中，一级表格选择框中没有样式，反过来一样。

---

2. 勾选问题

先给给一级表格和二级表格分别添加上：ref 和 @select

 <el-table
      ref="table"
       :data="tableData"
       style="width: 100%"
       @select="handleSelectionChange"
       @select-all="handleSelectionAll"
>

给二级表格加上：ref 和 @select

 <el-table
	  :ref="'tableChild' + props.$index"
	  :data="props.row.children"
	  style="width: 100%"
	  @select="handleSelectionChange2"
	  @select-all="handleSelectionAll2"
>

改变了之前的数据，多了一个key值，大概是一下这样：

tableData: [
        {
          id: "1298712333232",
          key: "1029733292929",
          name: "花甲",
          price: "15.9",
          num: "888",
          children: [
            { id: "1", key: "1029733292929", name: "随便" },
            { id: "2", key: "1029733292929", name: "随便2" }
          ]
        },

添加方法：
主要用的就是element-ui 官网上的 toggleRowSelection(row, selected)方法，row 一定是一条数据哦。

 methods: {
    //一级表格勾选
    handleSelectionChange(selection, row) {
      //判断一级表格是否选中  选中--true  未选中--0
      let isCheck = selection.length && selection.indexOf(row) !== -1;
      //循环整个表数据--找到勾选的 index
      this.tableData.forEach((item, index) => {
        if (item.id == row.id) {
          //在勾选时展开本行数据--不然找不到toggleRowSelection
          this.$refs.table.toggleRowExpansion(item, true);
          let tempList = row.children;
          this.$nextTick(() => {
            //以防二级列表没有数据
            if (tempList) {
              //循环本次勾选的数据
              tempList.forEach(selectionItem => {
                console.log(selectionItem, isCheck);
                this.$refs[`tableChild${index}`].toggleRowSelection(
                  selectionItem,
                  isCheck
                );
              });
            }
          });
        }
      });
    },
    //二级表格勾选
    handleSelectionChange2(selection, row) {
      //判断二级列表是否取消勾选（无数据）
      let isCheck = selection.length > 0;
      this.tableData.forEach((item, index) => {
        if (item.key == row.key) {
          this.$refs.table.toggleRowSelection(item, isCheck);
        }
      });
    },

    //一级表格全选->子表格全部勾选
    handleSelectionAll(selection, row) {
      console.log(selection);
      this.tableData.forEach(async (item, index) => {
        await this.$refs.table.toggleRowExpansion(item, true);
        //判断取消还是勾选--取消清空选择数据
        if (selection) {
          this.$refs[`tableChild${index}`].toggleAllSelection();
        } else {
          this.$refs[`tableChild${index}`].clearSelection();
        }
      });
    },
    //子表格勾选 --->联动一级表格
    handleSelectionAll2(selection, row) {
      console.log(selection);
      if (selection.length > 0) {
        let list = this.tableData.find(item => {
          return item.key === selection[0].key;
        });
        this.$refs.table.toggleRowSelection(list, true);
      } else {
        this.$refs.table.clearSelection();
      }
    }
  }
};

让我们看一下结果：

有问题欢迎指正哦~