模拟Cascader 单纯的显示

子组件： cascaderDiv.vue

<template>
    <div class="cascader_div">
        <div class="cascader_option" v-for="(val,index) in dataList" :key="index+'cas'">
            <div @click="detail(val,index)">
                <span>{{val.pledgeBondcode}}</span>
                <span>{{val.pledgeAmount}}</span>
            </div>
            <i class="el-icon-error remove_domain" @click.prevent="removeNewsList(val,index)" />
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            /**
             * 面板数据格式：[{}]
             * {
             *  title:'标题'
             * }
             */
            dataListget: { // 所有数据
                type: Array,
                default() {
                    return []
                }
            }
        },
        data() {
            return {
                dataList: [],
                pledgeBondcode: '',
                pledgeAmount:''
            }
        },
        watch: {
            dataListget(val, newval) {
                this.dataList = JSON.parse(JSON.stringify(this.dataListget));
                // console.log('734745,',val)
                // console.log(newval)
            }
        },
        mounted() {
            this.dataList = JSON.parse(JSON.stringify(this.dataListget));
        },
        methods: {
            addObj(val){ // 添加 父组件可以使用 如： this.$refs.XXX.addObj({'pledgeBondcode': '债券A','pledgeAmount':'500万'}); 来添加
              this.dataList.push(val);
              this.$emit('removeFn',this.dataList); // 最新数据
            },
            amend(val,index){ // 修改 父组件可以使用 如： this.$refs.XXX.addObj({'pledgeBondcode': '债券A','pledgeAmount':'500万'},0); 来添加
              this.dataList.splice(index,1,val);
            },
            removeNewsList(val,index) { // 删除
               console.log('删除',val,index);
               this.dataList.splice(index,1)
               this.$emit('removeFn',this.dataList); // 最新数据
            },
            detail(val,index){
              console.log('详情',val,index)
              this.$emit('detailFn',val,index);
            }
        },
    }
</script>

<style lang="less">
   .cascader_div{
        width: 100%;
        height: 36px;
        border: solid 1px #999;
        border-radius: 4px;
        display: flex;
        align-items: center;
        .cascader_option{
            height: 88%;
            background: #f0f2f5;
            /* background: #f0f2f5; */
            border-radius: 4px;
            margin: 0 4px;
            padding-left: 6px;
            display: flex;
            align-items: center;
        }
        .remove_domain{
           padding: 0 4px;
        }
   }
</style>

展示

父组件调用

<el-form-item label="测试" label-width="120px" prop="dataListget">
        <el-col :span="11">
           <cascader-Div :dataListget="form.dataListget" @detailFn="detailFn" @removeFn="removeFn" ref="xxx"></cascader-Div>
        </el-col>
</el-form-item>

data 定义：

form: {
        'dataListget':[{'pledgeBondcode': '债券A','pledgeAmount':'500万'},{'pledgeBondcode': '债券c','pledgeAmount':'300万'}],
    }