专栏首页前端之攻略Element el-tree树形控件的数据处理方法

Element el-tree树形控件的数据处理方法

假如需求,左边是树形菜单,右边是点击树形菜单显示的所以按钮以及选中的按钮,每一个子节点对应的按钮可能不一样,如何实现选择的按钮更新到数据对象中

假如初始的数据结构是下面的mainData如下:

  data() {
    return {
      btnTableData: [],
      multipleSelectionBtn: [],
      selectedTreeObj: {},
      mainData: [
        {
          menuId: "1",
          menuName: "一级1",
          children: [
            {
              menuId: "2",
              menuName: "二级1",
              allButtons: [
                { btnId: 1, btnName: "增加" },
                { btnId: 2, btnName: "编辑" },
                { btnId: 3, btnName: "删除" }
              ],
              selectedBtn: [
                { btnId: 1, btnName: "增加" },
                { btnId: 2, btnName: "编辑" }
              ]
            },
            {
              menuId: "3",
              menuName: "二级2",
              allButtons: [
                { btnId: 1, btnName: "增加" },
                { btnId: 2, btnName: "编辑" },
                { btnId: 3, btnName: "删除" }
              ],
              selectedBtn: [{ btnId: 1, btnName: "增加" }]
            }
          ]
        },
        {
          menuId: "4",
          menuName: "一级2",
          children: [
            {
              menuId: "4",
              menuName: "二级1",
              children: [
                {
                  menuId: "5",
                  menuName: "三级1",
                  allButtons: [
                    { btnId: 1, btnName: "增加" },
                    { btnId: 2, btnName: "编辑" },
                    { btnId: 3, btnName: "删除" },
                    { btnId: 4, btnName: "查看" }
                  ],
                  selectedBtn: [
                    { btnId: 1, btnName: "增加" },
                    { btnId: 2, btnName: "编辑" }
                  ]
                }
              ]
            }
          ]
        }
      ]
    };
  },

我们可以利用对象的特征--是引用类型,点击树形菜单的时候可以获取当前点击的对象数据,根据表格选中的数据,修改此对象,原对象也会更新

完整代码

    <el-row :gutter="20">
      <el-col :span="12">
        <el-tree
          :data="mainData"
          @node-click="treeNodeClick"
          default-expand-all
          show-checkbox
          node-key="menuId"
          :props="{children:'children',label:'menuName'}"
        ></el-tree>
      </el-col>
      <el-col :span="12">
        <el-table
          :data="btnTableData"
          border
          class="table"
          ref="btnTable"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="btnName" label="按钮名称"></el-table-column>
        </el-table>
      </el-col>
    </el-row>
  methods: {
    handleSelectionChange(val) {
      this.selectedTreeObj.selectedBtn = val;
      //console.log(val)
    },
    treeNodeClick(data) {
      this.selectedTreeObj = data;
      if(data.children && data.children.length){
        return
      }
      if (data.hasOwnProperty("allButtons")) {
        this.btnTableData = data.allButtons;
        let allBtns = data.allButtons;
        let seltectedBtns = data.selectedBtn;
        let arr = [];

        for (let i = 0; i < seltectedBtns.length; i++) {
          for (let j = 0; j < allBtns.length; j++) {
            if (seltectedBtns[i].btnId == allBtns[j].btnId) {
              arr.push(allBtns[j]);
              break;
            }
          }
        }
        this.$nextTick(() => {
          for (let m = 0; m < arr.length; m++) {
            this.$refs.btnTable.toggleRowSelection(arr[m]);
          }
        });

        console.log(arr);
      }
    }
  },

注意:使用toggleRowSelection()方法时一定要在this.$nextTick()中执行,要确保表格已经存在的情况下使用此方法

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 含有echart 图表的报表打印 原

    最近需要打印含有echart图表的报表,采用jqprint插件打印,直接用jqprint打印echart的图不显示,这里需要借助img 来实现

    tianyawhl
  • echart-仪表盘 原

     gauge : {         startAngle: 225,         endAngle : -45,         axisLine:...

    tianyawhl
  • css 总结1 原

    1、@import是 CSS 提供的语法规则,只有导入样式表的作用;link是HTML提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属...

    tianyawhl
  • Spring Boot 集成 Ehcache 缓存,三步搞定!

    www.ramostear.com/articles/spring_boot_ehcache.html

    好好学java
  • Spring Boot 集成 Ehcache 缓存,三步搞定!

    本次内容主要介绍基于Ehcache 3.0来快速实现Spring Boot应用程序的数据缓存功能。在Spring Boot应用程序中,我们可以通过Spring ...

    JAVA葵花宝典
  • Spring Boot 集成 Ehcache 缓存,三步搞定!

    本次内容主要介绍基于Ehcache 3.0来快速实现Spring Boot应用程序的数据缓存功能。在Spring Boot应用程序中,我们可以通过Spring ...

    Java技术栈
  • 3步轻松搞定Spring Boot缓存

    本次内容主要介绍基于Ehcache 3.0来快速实现Spring Boot应用程序的数据缓存功能。在Spring Boot应用程序中,我们可以通过Spring ...

    程序员追风
  • 硬核 | 使用spring cache让我的接口性能瞬间提升了100倍

    笔者之前做商城项目时,做过商城首页的商品分类功能。当时考虑分类是放在商城首页,以后流量大,而且不经常变动,为了提升首页访问速度,我考虑使用缓存。对于java开发...

    苏三说技术
  • 乱炖“简书交友”数据之代码

    上一篇文章乱炖数据之2700余篇“简书交友”专题文章数据的花式玩法发布后,不少人想学习下代码,由于此前不曾在GitHub上开源过,流程还不熟悉,再者本项目中很多...

    古柳_DesertsX
  • 【前沿技术】使用 Go 进行 iOS 和 Android 编程

    虽然 Go 并不是一门新语言,不过最近两年来 Go 还是增加了很多有趣的特性,而且使用这门语言的知名项目的数量也在快速的增长。我写过一篇文章,介绍了 SiteP...

    程序员互动联盟

扫码关注云+社区

领取腾讯云代金券