el-Table 点击当前行互斥选中 + 树形数据多选 + 改变背景色

BUGKing-

已于 2022-04-20 15:11:50 修改

阅读量978

点赞数

文章标签： javascript 前端 vue.js

于 2022-02-17 16:25:38 首次发布

本文链接：https://blog.csdn.net/sneer_shen/article/details/122986197

版权

本文介绍了如何使用Element UI的el-table实现表格的多级展开与收起功能，通过row-class-name和row-key属性配合，以及自定义checkbox，实现实时切换显示状态。适合前端开发者理解表格组件的动态管理。

摘要由CSDN通过智能技术生成

<template>
  <div>
    <el-table
      ref="multipleTable"
      :row-class-name="rowStyle"
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      :default-expand-all="isExpand"
      @row-click="clickRow"
      @selection-change="handleSelectionChange"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column type="selection" width="55">
        <template slot-scope="scope">
          <el-checkbox
            @change="clickRow(scope.row)"
            v-model="scope.row.isShow"
            :class="scope.row.childrenStyle ? 'childrenA' : ''"
          ></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      multipleSelection: [],
      isExpand: false,
      tableData: [
        {
          id: 1,
          date: "2016-05-02",
          isShow: false, //默认不选中，调接口后前端可以循环set这个参数进去，也可以让后台返回
        },
        {
          id: 2,
          date: "2016-05-04",
          isShow: false,
        },
        {
          id: 3,
          date: "2016-05-01",
          isShow: false,
          children: [
            {
              id: 31,
              date: "子集1",
              isShow: false,
              childrenStyle: "son", //子集得标识，改变多选框样式用
            },
            {
              id: 32,
              date: "子集2",
              isShow: false,
              childrenStyle: "son",
            },
          ],
        },
        {
          id: 4,
          date: "2016-05-03",
          isShow: false,
        },
      ],
    };
  },
  methods: {
    /**
     * @function handleSelectionChange    当选择项发生变化时会触发该事件
     * @function clickRow                 当前行点击事件
     * @function rowStyle                 点击当前行改变背景色
     */

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    clickRow(row) {
      row.isShow = !row.isShow;
      this.$refs.multipleTable.toggleRowSelection(row, row.isShow);
    },
    rowStyle({ row }) {
      let rowArr = this.multipleSelection;
      if (rowArr.length == 0) {
        return "";
      }
      for (let i = 0; i < rowArr.length; i++) {
        if (rowArr[i].id == row.id) {
          return "mutenrowStyle";
        }
      }
    },
  },
};
</script>
<style scoped>
.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%;
}
/deep/ .el-table .mutenrowStyle {
  background-color: #999 !important;
}
.childrenA {
  position: absolute;
  left: 75px;
  top: 15px;
}
</style>