首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Element el-tree树形控件的数据处理方法

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

作者头像
tianyawhl
发布2020-07-27 16:13:11
4.7K0
发布2020-07-27 16:13:11
举报
文章被收录于专栏:前端之攻略前端之攻略

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

假如初始的数据结构是下面的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()中执行,要确保表格已经存在的情况下使用此方法

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档