el-cascader组件 回显

<el-form-item label="支付方式" prop="payWayList">
    <el-cascader 
    	v-model="ruleForm.payWayList" 
    	:props="propsData" 
    	clearable 
    	collapse-tags 
    	collapse-tags-tooltip
        :options="options" 
        @change="handleCasChange" 
        style="width: 360px;"
      />
el-form-item>
const propsData = reactive({
    label: 'payTypeName',
    value: 'payTypeCode',
    children: 'nodes',
    multiple: true,
});

const handleCasChange = (value: any) => {
    console.log(value, 'value')
    let arr: any = [];
    value.map((item: any) => {
        if (item.length > 1) {
            arr.push(item[1]);
        } else {
            arr.push(item[0]);
        }
    });
    ruleForm.payWayList = arr;
};
const options = ref([]);
const getDetail = async () => {
    const res: any = await payDetail({id: mchChannelId.value});
    const result = findParentTypes(options.value, res.payWayList);
    ruleForm.payWayList = result;
};
const findParentTypes = (inputArray:any, valuesToFind:any) => {
    const parentTypes:any = [];
    inputArray.forEach((item:any) => {
        if (item.nodes.length > 0) {
            item.nodes.forEach((node:any) => {
                if (valuesToFind.includes(node.payTypeCode)) {
                    parentTypes.push([item.payTypeCode, node.payTypeCode]);
                }
            });
        } else if (valuesToFind.includes(item.payTypeCode)) {
            parentTypes.push([item.payTypeCode]);
        }
    });
    return parentTypes;
};

你可能感兴趣的:(Vue.js,javascript,vue.js,ecmascript)