vue自定义级联面板

最新推荐文章于 2024-05-29 12:36:50 发布

samscat

最新推荐文章于 2024-05-29 12:36:50 发布

阅读量554

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/samscat/article/details/130123705

版权

<template>
    <div class="cascader-wrapper">
        <div v-for="(item, index) in loops" :key="index" class="cascader-item">
            <p 
              v-for="(inner, index2) in item.t" 
              :key="inner.ID" 
              @click="handleClick(inner, index, index2)"
              :class="['cascader-text', activeIDS[index].includes(inner.ID) ? 'active':'']" >
                <span>{{inner.OrgName}},{{ inner.ID }}</span> 
                <i v-if="inner.children" class="iconfont icon-arrow-right"></i>
            </p>
        </div>
    </div>
</template>
<script>
export default {
    name: 'CascaderPanel',
    props: {
        panelData: {
            type: Array,
            default: () => []
        }
    },
    data () {
        return {
            loops: [],
            activeIDS: [[],[],[],[],[]] // 最多5层
        }
    },
    watch: {
      panelData: {
        handler(val) {
            this.loops = [{t: val}]
        },
        immediate: true
      }
    },
    methods: {
        handleClick(e, colIndex, rowIndex) {
            this.$set(this.activeIDS, colIndex, [e.ID])
            if(e.children && e.children.length) {
                this.loops.splice(colIndex + 1, this.loops.length - 1, {t: e.children})
            } else {
                this.loops.splice(colIndex + 1)
            }
        }
    }
}
</script>
<style lang="scss" scoped>

.cascader-wrapper {
    display: flex;
    .cascader-item {
        background-color: #fff;
        line-height: 1;
        color: #000000ff;
        font-size: 14px;
        width: 317px;
        height: calc(100vh - 300px);
        border-right: 1px solid #E5E6EB;
        transition: all 0.5s;
        .cascader-text {
            padding: 10px 16px;
            margin:0;
            &.active {
                background-color: #F2F3F5;
                cursor: pointer;
            }
            &:hover {
                color: #1ba6f7;
            }
        }
        .icon-arrow-right {
            float: right;
            margin-right: 12px;
        }
    }
}
</style>