Cascader 级联选择器 ，添加和编辑用的同一个组件，编辑禁

1.把公共的组件先出来

<template>
    <div class="selectSectionColumn">
        <el-cascader
                :options="sectionColumns"
                :props="sctColProp"
                :disabled="isDisabled"//父组件传过来的值，编辑的时候传true，不可编辑，其他的传false
                clearable
                change-on-select
                placeholder="请选择版块/栏目"
                v-model="sectionCode"
                @change="handlerValue"
        >

        </el-cascader>
    </div>
</template>

<script>
    import selectSectionColumnApi from "../../assets/api/selectSectionColumn";
    export default {
        name: "selectSectionColumn",
        data(){
            return{
                //版块和栏目联动
                sctColProp: {
                    checkStrictly: true,
                    value:'sectionCode',
                    label:'sectionName',
                    children:'sectionColumns'
                },
                sectionColumns:[],//版块/栏目
                sectionCode:[] //绑定数据
            }
        },
        props:{
            sectionCodeAddColumnAdd: {
                type: Object,
                default () {
                    return {}
                }
            },
            isDisabled:{
                type: Boolean
            },
        },
        created(){
                this.getSectionName();//获取版块栏目联动下拉
        },
        methods: {
            //获取版块栏目联动下拉
            getSectionName(){
                selectSectionColumnApi.getallSectionAndColumnByStatusList().then(res=>{
                    if(res.status===0){
                        this.sectionColumns=res.data||[];
                       //回显
                        if(res.data.length>0){
                            this.sectionCode=[];
                            //编辑回显版块/栏目
                            if(this.$props.sectionCodeAddColumnAdd){
                                for( let i=0; i<res.data.length;i++){
                                    setTimeout(()=>{//定时器，为了有时不回显
                                            if(res.data[i].sectionCode==this.$props.sectionCodeAddColumnAdd.sectionCode || res.data[i].sectionCode==this.$props.sectionCodeAddColumnAdd.belongSectionCode){//版块
                                                this.sectionCode.push(res.data[i].sectionCode)
                                                if(res.data[i].sectionColumns&&res.data[i].sectionColumns.length>0){
                                                    if(this.$props.sectionCodeAddColumnAdd){
                                                        for (let k=0; k<res.data[i].sectionColumns.length;k++){
                                                            if(this.$props.sectionCodeAddColumnAdd.columnCode==res.data[i].sectionColumns[k].sectionCode||this.$props.sectionCodeAddColumnAdd.belongColumnCode==res.data[i].sectionColumns[k].sectionCode){//栏目
                                                                this.sectionCode.push(res.data[i].sectionColumns[k].sectionCode)
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                        },0);
                                    }
                                }
                        }
                    }
                }) .catch((error) => {
                    console.log('/sectionColumnMsg/selectAllSectionAndColumn', error)
                });
            },
            handlerValue(value){
                this.$emit('sectionColumnAdd',value)
            }
        }
    }
</script>

<style scoped>

</style>

2.父组件的结构,同一个弹窗，默认为fasle，可编辑，如果是编辑弹窗的时候设置为true

data里面默认为 isDisabled:false,//版块和栏目默认可编辑
//:isDisabled="isDisabled"
<el-form-item label="版块/栏目" prop="sectionCode" >
          <select-section-column-add :isDisabled="isDisabled"  ref="sectionCodeAdd" :sectionCodeAddColumnAdd="dialogForm"    @sectionColumnAdd="sectionColumnSelectAdd"></select-section-column-add>
        </el-form-item>

3.弹窗的时候区分开每一项

//初始化弹窗
      openDia(operationType,id){
        this.currentFlag = operationType;
        this.$set(this.dialogForm, 'id', "");
        this.currentFlag = operationType;
        if(operationType=='showInfo'){//详情
          this.dialogTitle = '详情';
          this.details(id);
          this.dialogVisible=true;
          this.isDetailPage=true;
          this.isDisabled=true//不可编辑
        }else if(operationType=='add'){
            this.dialogTitle='新增资料';
            this.resetAddData();//清空新增
            this.dialogVisible=true
            this.isDetailPage=false;
            this.isDisabled=false
        }else{
          this.dialogTitle='删除';
          this.dialogVisible=true;
          this.isDetailPage=false;
          this.del(id);
        }
      },