Element UI 树形表格+复选框(父节点选中时子节点联动)

1.png
<template>
  <el-table
    :data="renderDynamic"
    ref="product"
    row-key="id"
    size="mini"
    @select="selectRow"
    default-expand-all
    @select-all="selectAllRow"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55"> </el-table-column>
    <el-table-column type="index" label="序号" width="50"> </el-table-column>
    <el-table-column prop="createUser" label="创建人"> </el-table-column>
    <el-table-column prop="fileName" label="文件名"> </el-table-column>
    <el-table-column prop="createTime" label="时间"> </el-table-column>
  </el-table>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      renderDynamic: [
        {
          id: "1589546710706933760",
          pid: "-1",
          fullName: "hdfs://mycluster:8020/dmp/meta/script/XX项目演示-孟/12",
          isDirectory: 1,
          description: "12",
          fileName: "12",
          size: 109881,
          createUser: "admin",
          createTime: "2022-11-06 00:14:03",
          updateUser: "admin",
          updateTime: "2022-11-06 00:14:03",
          sensitivity: null,
          standardNumber: null,
          sort: "",
          children: [
            {
              id: "1598575793801367552",
              pid: "1589546710706933760",
              fullName:
                "hdfs://hdp01:8020/dmp/meta/script/XX项目演示-孟/12/4.png",
              isDirectory: 0,
              description: null,
              fileName: "4.png",
              size: 36627,
              createUser: "admin",
              createTime: "2022-12-02 01:12:24",
              updateUser: "admin",
              updateTime: "2022-12-02 01:12:24",
              sensitivity: null,
              standardNumber: "“”",
              sort: "",
              children: [],
            },
            {
              id: "1598583904029212672",
              pid: "1589546710706933760",
              fullName:
                "hdfs://hdp01:8020/dmp/meta/script/XX项目演示-孟/12/3.png",
              isDirectory: 0,
              description: null,
              fileName: "3.png",
              size: 36627,
              createUser: "admin",
              createTime: "2022-12-02 01:44:38",
              updateUser: "admin",
              updateTime: "2022-12-06 15:18:44",
              sensitivity: 1,
              standardNumber: "",
              sort: "文件类型1",
              children: [
                {
                  id: "1589546834929635328",
                  pid: "-1",
                  fullName:
                    "hdfs://hdp01:8020/dmp/meta/script/XX项目演示-孟/12/1.jpg",
                  isDirectory: 0,
                  description: null,
                  fileName: "1.jpg",
                  size: 98316,
                  createUser: "admin",
                  createTime: "2022-11-07 17:14:32",
                  updateUser: "admin",
                  updateTime: "2022-11-07 17:14:32",
                  sensitivity: null,
                  standardNumber: null,
                  sort: "",
                  children: [
                    {
                      id: "1656206644327051264",
                      pid: "-1",
                      fullName:
                        "hdfs://mycluster:8020/dataStandard/file/教育行业数融平台/JYT 0633—2022:教育基础数据.pdf",
                      isDirectory: 0,
                      description: null,
                      fileName: "JYT 0633—2022:教育基础数据.pdf",
                      size: 266646,
                      createUser: "admin",
                      createTime: "2023-05-10 15:56:49",
                      updateUser: "admin",
                      updateTime: "2023-05-10 15:56:49",
                      sensitivity: null,
                      standardNumber: "",
                      sort: "",
                      children: [],
                    },
                  ],
                },
              ],
            },
          ],
        },

        {
          id: "1656206805937778688",
          pid: "-1",
          fullName:
            "hdfs://mycluster:8020/dataStandard/file/教育行业数融平台/JYT 0637—2022:教育系统人员基础数据.pdf",
          isDirectory: 0,
          description: null,
          fileName: "JYT 0637—2022:教育系统人员基础数据.pdf",
          size: 227038,
          createUser: "admin",
          createTime: "2023-05-10 15:57:28",
          updateUser: "admin",
          updateTime: "2023-05-10 15:57:28",
          sensitivity: null,
          standardNumber: "",
          sort: "",
          children: [],
        },
        {
          id: "1656206863827562496",
          pid: "-1",
          fullName:
            "hdfs://mycluster:8020/dataStandard/file/教育行业数融平台/JYT 0639—2022:中小学校基础数据.pdf",
          isDirectory: 0,
          description: null,
          fileName: "JYT 0639—2022:中小学校基础数据.pdf",
          size: 238599,
          createUser: "admin",
          createTime: "2023-05-10 15:57:42",
          updateUser: "admin",
          updateTime: "2023-05-10 15:57:42",
          sensitivity: null,
          standardNumber: "",
          sort: "",
          children: [],
        },
        {
          id: "1656206911458078720",
          pid: "-1",
          fullName:
            "hdfs://mycluster:8020/dataStandard/file/教育行业数融平台/JYT 0641—2022:智慧教育平台基本功能要求.pdf",
          isDirectory: 0,
          description: null,
          fileName: "JYT 0641—2022:智慧教育平台基本功能要求.pdf",
          size: 489197,
          createUser: "admin",
          createTime: "2023-05-10 15:57:53",
          updateUser: "admin",
          updateTime: "2023-05-10 15:57:53",
          sensitivity: null,
          standardNumber: "",
          sort: "",
          children: [],
        },
        {
          id: "1656207095046959104",
          pid: "-1",
          fullName:
            "hdfs://mycluster:8020/dataStandard/file/教育行业数融平台/JYT 0644—2022:数字教育资源基础分类代码.pdf",
          isDirectory: 0,
          description: null,
          fileName: "JYT 0644—2022:数字教育资源基础分类代码.pdf",
          size: 345741,
          createUser: "admin",
          createTime: "2023-05-10 15:58:37",
          updateUser: "admin",
          updateTime: "2023-05-10 15:58:37",
          sensitivity: null,
          standardNumber: "",
          sort: "",
          children: [],
        },
        {
          id: "1656207200630173696",
          pid: "-1",
          fullName:
            "hdfs://mycluster:8020/dataStandard/file/教育行业数融平台/JYT 0646—2022:教师数字素养.pdf",
          isDirectory: 0,
          description: null,
          fileName: "JYT 0646—2022:教师数字素养.pdf",
          size: 328113,
          createUser: "admin",
          createTime: "2023-05-10 15:59:02",
          updateUser: "admin",
          updateTime: "2023-05-10 15:59:02",
          sensitivity: null,
          standardNumber: "",
          sort: "",
          children: [],
        },
        {
          id: "1656207256464748544",
          pid: "-1",
          fullName:
            "hdfs://mycluster:8020/dataStandard/file/教育行业数融平台/JYT 0650—2022:智慧教育平台数字教育资源技术要求.pdf",
          isDirectory: 0,
          description: null,
          fileName: "JYT 0650—2022:智慧教育平台数字教育资源技术要求.pdf",
          size: 255907,
          createUser: "admin",
          createTime: "2023-05-10 15:59:15",
          updateUser: "admin",
          updateTime: "2023-05-10 15:59:15",
          sensitivity: null,
          standardNumber: "",
          sort: "",
          children: [],
        },
        {
          id: "1656207298957242368",
          pid: "-1",
          fullName:
            "hdfs://mycluster:8020/dataStandard/file/教育行业数融平台/关于印发智慧校园建设有关标准的通知.pdf",
          isDirectory: 0,
          description: null,
          fileName: "关于印发智慧校园建设有关标准的通知.pdf",
          size: 418195,
          createUser: "admin",
          createTime: "2023-05-10 15:59:26",
          updateUser: "admin",
          updateTime: "2023-05-10 15:59:26",
          sensitivity: null,
          standardNumber: "",
          sort: "",
          children: [],
        },
        {
          id: "1656207334147452928",
          pid: "-1",
          fullName:
            "hdfs://mycluster:8020/dataStandard/file/教育行业数融平台/智慧校园 第2部分:高等教育阶段评价指标.pdf",
          isDirectory: 0,
          description: null,
          fileName: "智慧校园 第2部分:高等教育阶段评价指标.pdf",
          size: 427093,
          createUser: "admin",
          createTime: "2023-05-10 15:59:34",
          updateUser: "admin",
          updateTime: "2023-05-10 15:59:34",
          sensitivity: null,
          standardNumber: "",
          sort: "",
          children: [],
        },
        {
          id: "1660926004253716480",
          pid: "-1",
          fullName: "hdfs://mycluster:8020/dataStandard/file/验收项目/测试文件",
          isDirectory: 1,
          description: "1",
          fileName: "测试文件",
          size: 0,
          createUser: "admin",
          createTime: "2023-05-23 16:29:53",
          updateUser: "admin",
          updateTime: "2023-05-23 16:29:53",
          sensitivity: null,
          standardNumber: null,
          sort: "",
          children: [],
        },
      ],
    };
  },
  // isSelect状态:true为选中状态,false为未选中状态 ,空字符串为未知状态
  mounted() {},
  methods: {
    // 勾选父节点时,子层级一起勾选或一起取消勾选
    selectRow(selection, row) {
      let data = selection.some((item) => {
        return row.id === item.id;
      });
      if (data) {
        // 勾选节点时
        if (row.children) {
          this.setChildren(row.children, true);
        }
      } else {
        // 取消勾选节点时
        if (row.children) {
          this.setChildren(row.children, false);
        }
      }
    },
    // 全选按钮
    selectAllRow(selection) {
      // 全选
      let isSelect = selection.some((item) => {
        let tableDataIds = this.renderDynamic.map((data) => data.id);
        if (tableDataIds.indexOf(item.id) !== -1) {
          return true;
        } else {
          return false;
        }
      });
      // 全不选
      let isCancel = !this.renderDynamic.every((item) => {
        let selectIds = selection.map((data) => data.id);
        if (selectIds.indexOf(item.id) !== -1) {
          return true;
        } else {
          return false;
        }
      });
      if (isSelect) {
        selection.map((item) => {
          if (item.children) {
            this.setChildren(item.children, true);
          }
        });
      }
      if (isCancel) {
        this.renderDynamic.map((item) => {
          if (item.children) {
            this.setChildren(item.children, false);
          }
        });
      }
    },
    // 父节点含多个子层级
    setChildren(children, type) {
      children.map((item) => {
        this.toggleSelection(item, type);
        if (item.children) {
          this.setChildren(item.children, type);
        }
      });
    },

    toggleSelection(row, select) {
      if (row) {
        this.$nextTick(() => {
          this.$refs.product.toggleRowSelection(row, select);
        });
      }
    },
    handleSelectionChange(val) {
      console.log(val, "选中的值");
    },
  },
};
</script>
 
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 193,968评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,682评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,254评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,074评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,964评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,055评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,484评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,170评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,433评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,512评论 2 308
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,296评论 1 325
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,184评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,545评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,150评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,437评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,630评论 2 335

推荐阅读更多精彩内容