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

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

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

代码语言：javascript复制

  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: "编辑" }
                  ]
                }
              ]
            }
          ]
        }
      ]
    };
  },

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

完整代码

代码语言：javascript复制

    <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>

代码语言：javascript复制

  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()中执行，要确保表格已经存在的情况下使用此方法

数据结构 toggle 表格

1 人点赞