el-cascader级联选择器自定义选项

<template>
    <div>
        <el-cascader :options="options" v-model="name" ref="name" :props="{ multiple: true, checkStrictly: true }"
            @change="change">
            <template slot-scope="{data }">
                <span>{{ data.label }}</span>
                <span v-if="data.label == ''"> 自定义 </span>
            </template>
        </el-cascader>
        {{ name }}
        <el-dialog title="自定义名称" :visible.sync="dialogFormVisible" width="50%">
            <el-button type="primary" @click="addFn">添加</el-button>
            <div>
                <el-input v-for="item in list" :key="item.index" placeholder="请输姓名" v-model="item.name">
                    <template slot="prepend">{{ prefix }}</template>
                </el-input>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="okFn">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

export default {
    name: 'Page404',
    data() {
        return {
            arr: [],
            prefix: '',
            name: [],
            list: [],
            dialogFormVisible: false,
            options: [{
                value: '指南',
                label: '指南',
                children: [{
                    value: '设计原则',
                    label: '设计原则',
                }, {
                    value: '',
                    label: ''
                }]
            }, {
                value: '指北',
                label: '指北',
                children: [{
                    value: '网页',
                    label: '网页',
                }, {
                    value: '',
                    label: ''
                }]
            }]
        }
    },
    methods: {
        change(e) {
            if (this.containsEmptyString(e) != false) {
                this.arr = this.containsEmptyString(e)
                this.prefix = this.arr.join('/')
                this.dialogFormVisible = true
                this.list = [{
                    name: ''
                }]
            }
        },
        containsEmptyString(arr) {
            for (let i = 0; i < arr.length; i++) {
                if (typeof arr[i] === 'string' && arr[i] === '') {
                    return arr; // 找到空字符串，直接返回true  
                } else if (Array.isArray(arr[i])) {
                    if (this.containsEmptyString(arr[i])) {
                        return arr[i]; // 递归调用，如果子数组包含空字符串，返回true  
                    }
                }
            }
            return false; // 遍历完所有元素都未找到空字符串，返回false  
        },
        addFn() {
            this.list.push({
                name: ''
            })
        },
        okFn() {
            this.list.forEach((item) => {
                let row = (this.prefix + item.name).split('/')
                this.name.push(row)
            })
            this.name = this.name.filter((i)=>i[i.length -1] !== '')
            for (let i = 0; i < this.options.length; i++) {
                if (this.options[i].value == this.arr[0]) {
                    this.options[i].children.pop()
                    this.list.forEach((item) => {
                        this.options[i].children.push({
                            value: item.name,
                            label: item.name,
                        })
                    })
                    this.options[i].children.push({
                        value: '',
                        label: '',
                    })
                }
            }
        }
    },
}
</script>