动态的el-cascader懒加载和radio的结合使用-新增和修改通过el-cascader来选择数据

<template>
    <div>
        <vxe-table ref="mytable" :data="tableData" style="width: 100%; margin-bottom: 20px" row-id="id"
            highlight-current-row border
            :tree-config="{ children: 'children', hasChild: 'isParent', lazy: true, loadMethod: load }">
            <vxe-column field="name" title="目录名称" sortable width="700" tree-node />
            <vxe-column field="date" title="序号" sortable />
            <vxe-column title="操作" align="center" header-align="center" width="600">
                <template slot-scope="scope">
                    <el-button plain type="primary" @click="addTree(scope.row)">
                        添加
                    </el-button>
                    <el-button type="primary" plain @click="updateTree(scope.row)">
                        修改
                    </el-button>
                </template>
            </vxe-column>
        </vxe-table>
        <!-- 弹框 -->
        <el-dialog :title="form.treeTitle" :fullscreen="dialogFullscree" :visible.sync="dialogVisible" width="40%"
            class="showDialogClass" :close-on-click-modal="false" :before-close="handleClose">
            <el-form ref="form" :model="form" label-width="190px">
                <el-form-item label="选择目录">
                    <el-cascader ref="cascader" :options="tableData" popper-class="gy-cascader"
                        :props="{ value: 'id', label: 'name', checkStrictly: true }" size="small" :key='cascaderIdx'
                        v-model="cascadrValue" :show-all-levels="false"/>
                </el-form-item>
                <el-form-item :label="form.treeLabel">
                    <el-input :disabled="false" v-model="form.name" />
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="onSubmit">
                    {{ buttonText }}
                </el-button>
                <el-button @click="handleClose">
                    取消
                </el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [
                {
                    date: '2016-05-02',
                    name: '王小虎'
                }, {
                    date: '2016-05-04',
                    name: '王小虎'
                }, {
                    date: '2016-05-01',
                    name: '王小虎'
                }, {
                    date: '2016-05-03',
                    name: '王小虎'
                }
            ],
            form: {
                treeTitle: '',
                name: "",
            },
            dialogFullscree: false,
            dialogVisible: false,
            cascaderIdx: 0,
            addRow:"",
            updateRow:"",
        }
    },
    created(){

    },
    watch: {
        cascadrValue() {
            if (this.$refs.cascader) {
                this.$refs.cascader.dropDownVisible = false
            }
        },
        tableData(newVal) {
            this.cascaderIdx++;
        },
    },
    methods: {
        handleClose() {
            this.dialogVisible = false;
        },
        //作用是查询给定ID的所有父节点，并将这些父节点存储在一个数组中返回
        getAllParents(id) {
          let list = this.tableData
          function getParentTree(id, tree) {
            let arr = [];
            for (let i = 0; i < tree.length; i++) {
              let item = tree[i];
              arr = [];
              arr.push(item);
              if (id == item.id) {
                return arr;
              } else {
                if (item.children && item.children.length > 0) {
                  arr = arr.concat(getParentTree(id, item.children ? item.children : []));
                  if (arr.map((item2) => (item2 ? item2.id : "")).includes(id)) {
                    return arr;
                  }
                }
              }
            }
          }
          return getParentTree(id, list)
        },
        // 属于添加-添加的是下级数据
        addTree(row) {
            this.addRow = row;
            this.dialogVisible = true;
            this.form.treeTitle = `新增`
            this.form.treeLabel = `新增`
            this.form.name=``;
            this.cascadrValue = [];
    
            if(row.ParentId === '0') {
                this.cascadrValue = [row.id]
            } else {
                let arr = this.getAllParents(row.id)
                this.cascadrValue = arr.map(e => e.id)
            }
        },
        updateTree(row) {
            this.updateRow = row;
          this.dialogVisible = true;
          this.form.name = row.name;
          this.form.treeTitle = `修改`
          this.form.treeLabel = `修改`
  
          if(row.ParentId === '0') {
            this.cascadrValue = [row.id]
          } else {
            let arr = this.getAllParents(row.ParentId)
            this.cascadrValue = arr.map(e => e.id)
          }
        },
        onSubmit () {
          const params = {
              name: this.form.name,
              //父级id
              parentId: this.addRow.id,
          }
          if (this.form.treeTitle === `新增`) {
            let parentId = this.cascadrValue[this.cascadrValue.length - 1]
            params.data.parentId = parentId
            add(params).then((data) => {
              if (data.result === true) {
                this.$message({
                  type: `success`,
                  message: `操作成功`,
                })
                this.dialogVisible = false;
                this.getList();//数据重新获取
              }
              else {
                this.$message({
                  type: `warning`,
                  message: `操作失败`,
                })
              }
            })
          }
          else if (this.form.treeTitle === `修改`) {
            const param = {
                id: this.updateRow.id,
                name: this.form.name,
                parentId: this.updateRow.parentId,
            }
            let parentId = this.cascadrValue[this.cascadrValue.length - 1]
            param.data.parentId = parentId
            update(param).then((data) => {
              if (data.result === true) {
                this.$message({
                  type: `success`,
                  message: `修改成功`,
                })
                this.dialogVisible = false;
                this.getList();//数据重新获取
              }
              else {
                this.$message({
                  type: `warning`,
                  message: `修改失败`,
                })
              }
            })
          }
        },
    }
}
</script>

<style></style>

根据级联选择的按钮，然后选择你要给表格中的那一条数据新增下级或者把哪块的数据全部都拿到哪一条数据下进行修改