ant-design checkbox 多选级联

木不是

已于 2023-02-16 10:00:36 修改

阅读量652

点赞数

分类专栏： vue 文章标签：树结构

于 2023-02-16 10:00:13 首次发布

本文链接：https://blog.csdn.net/weixin_48056485/article/details/118657414

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

公司业务需求，不同于一般的多选级联，多级级联展示,循环组件去完成

先写一个子组件

<template>
  <div class="container">
    <div v-for="item in threeData" :key="item.id" >
      <credit-card-filed />
      <a-checkbox v-model="item.selected" @change="handleChange">
        {{ item.name }}
      </a-checkbox>
      <div v-if="item.children && item.children.length" class="check-item" v-show="item.selected">
        <three-check-box :three-data="item.children" :praent-selected="item.selected" @change="handleChange"></three-check-box>
      </div>
    </div>
  </div>
</template>
<script>
import ThreeCheckBox from './index.vue'
// import { CreditCardFilled } from '@ant-design/icons-vue'
export default {
    name: 'ThreeCheckBox',
    props: [ 'threeData', 'praentSelected' ],
    components: { ThreeCheckBox },
    data() {
        return {
            bool: true
        }
    },
    methods: {
        handleChange() {
            this.$emit('change', this.getSelectedIds(this.threeData)) 
        },
        getSelectedIds(treeData) {
            function handleGetSelectedIds (treeData) {
                const temp = []
                for (let i = 0; i < treeData.length; i++) {
                    const item = treeData[i]
                    if (item.selected) {
                        temp.push(item.id)
                    }
                    if (item.selected && item.children && item.children.length > 0) {
                        temp.push(...handleGetSelectedIds(item.children))
                    }
                }
                return temp
            }
            return handleGetSelectedIds(treeData)
        }
    },
    watch: {
        //监听父级选择，把子级selected置为false
        praentSelected: function(nv) {
            if (!nv) {
                this.threeData.forEach(i => {
                    if (i.selected) { i.selected = false } 
                })
            }
        }
    }
}
</script>

<style scoped>
.check-item {
    padding: 10px;
}
</style>

在父组件使用

<tree-check-box :tree-data="field.onedictory" :default-selected-ids="field.searchs" @change="(value) => handleTreeCheckBox(value, field)"></tree-check-box>