element树形结构封装菜单改变父节点的样式及遍历节点数据

Posted 2021-07-02 晚星@

效果图：

template代码

<el-dialog title="常用菜单配置"
               :visible.sync="dialogVisible"
               custom-class="notic-add-dialog"
               width="30%">
      <div style="height:400px;overflow:auto;padding:0 20px;">
        <el-tree :data="data"
                 show-checkbox
                 default-expand-all
                 node-key="pageId"
                 ref="treeData"
                 highlight-current
                 :props="defaultProps">
        </el-tree>
      </div>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="submitMenu()">确 定</el-button>
      </span>
    </el-dialog>

script

data(){
	return{
	// 树形结构的假数据
      data: [],
      // 默认显示参数名
      defaultProps: {
        children: 'child',
        label: 'pageName'
      },
      // 遍历选中回显的数组
      treeDataChange: [],
      // 显示按钮
      buttonMenu: []
      ]
},
methods:{
	// 打开菜单弹窗
    openMenu () {
      this.data = []
      const that = this
      this.$http.get(this.$API.OIL_GET_getUserMenu).then(res => {
        this.data = res.data[0].child
        var treeChange = this.getName(this.data)
        this.$refs.treeData.setCheckedKeys(treeChange);
      })
      this.dialogVisible = true
    },
    // 节点递归查id
    getName (item) {
      this.treeDataChange = [];
      let ret = this.recurision(item);
      return ret;
    },
    // 遍历递归
    recurision (item) {
      if (!item) return null;
      for (var i = 0; i < item.length; i++) {
        if (item[i].isPitch == 0) {
          this.treeDataChange.push(item[i].pageId)
          break
        };
        if (item[i].child) {
          this.recurision(item[i].child)
        };
      }
      return this.treeDataChange;
    },
    // 快捷口入
    submitMenu () {
      var arrData = this.$refs.treeData.getCheckedNodes()
      var newArrData = []
      if (arrData.length > 0) {
        arrData.forEach((item, index) => {
          if (item.child.length == 0) {
            newArrData.push(arrData[index])
          }
        })
        this.$http.post(this.$API.OIL_GET_updateUserCommonMenu, newArrData).then(res => {
          this.$message.success('添加成功')
          this.submitMenuButton()
        })
      } else {
        this.$message.error('请选择您想要的菜单')
      }
    },
}

接口输出是这样的