最近在做树形可选组件,用到了el-tree-select组件,但是发现这个组件好像不能自定义value,百思不得其解,希望得到大家解答
<template>
<el-tree-select
v-model="value"
:data="data"
check-strictly
:render-after-expand="false"
show-checkbox
:props="{value:'name'}"
multiple
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const value = ref()
const data = [
{
value: '1',//这是组件的默认value
label: 'Level one 1',
children: [
{
value: '1-1',//这是组件的默认value
label: 'Level two 1-1',
children: [
{
name: '1-1-1',//改成name
label: 'Level three 1-1-1',
},
],
},
],
},
{
name: '2',
label: 'Level one 2',
children: [
{
name: '2-1',
label: 'Level two 2-1',
children: [
{
name: '2-1-1',
label: 'Level three 2-1-1',
},
],
},
{
name: '2-2',
label: 'Level two 2-2',
children: [
{
name: '2-2-1',
label: 'Level three 2-2-1',
},
],
},
],
},
{
name: '3',
label: 'Level one 3',
children: [
{
name: '3-1',
label: 'Level two 3-1',
children: [
{
name: '3-1-1',
label: 'Level three 3-1-1',
},
],
},
{
name: '3-2',
label: 'Level two 3-2',
children: [
{
name: '3-2-1',
label: 'Level three 3-2-1',
},
],
},
],
},
]
</script>
从上图可以发现,该组件只能收集data中默认的value,即我自定义的:props="{value:'name'}"根本就没用,也就是时候以后如果用该组件,并且想收集某一项数据,就只能把data中想收集的数据改成value:'xxx',不知道大家有没有好的办法