原生組件中element-ui的tree組件是沒有單選這個api的将硝，只有多選岩四】蕹ⅲ可是很多實(shí)際項(xiàng)目中其實(shí)是有這樣需求的，比如我就遇到了剖煌。然后想辦法實(shí)現(xiàn)了材鹦，如果你也剛好需要，拿走不謝耕姊。
項(xiàng)目需求(只能單選)
TIM截圖20180903113411.png
html部分
<el-tree
:data="treeData"
ref="tree"
@check-change="orgCheckChange"
show-checkbox
:check-strictly="true"
node-key="id">
</el-tree>
data部分
treeData: [
{
id: 1,
label: '品牌一',
children: [
{
id: 4,
label: '華東區(qū)域',
children: [
{
id: 9,
label: '上海'
},
{
id: 10,
label: '昆山'
}
]
}
]
},
{
id: 2,
label: '品牌二',
children: [
{
id: 5,
label: '華東區(qū)域'
},
{
id: 6,
label: '華南區(qū)域'
}
]
},
{
id: 3,
label: '品牌三',
children: [
{
id: 7,
label: '華北區(qū)域'
},
{
id: 8,
label: '華南區(qū)域'
}
]
}
],
defaultProps: null,
selectOrg: {
orgsid: []
}
事件部分
// check-change
// 節(jié)點(diǎn)選中狀態(tài)發(fā)生變化時的回調(diào)
// 共三個參數(shù)桶唐，依次為：傳遞給 data 屬性的數(shù)組中該節(jié)點(diǎn)所對應(yīng)的對象、節(jié)點(diǎn)本身是否被選中茉兰、節(jié)點(diǎn)的子樹中是否有被選中的節(jié)點(diǎn)
orgCheckChange(data, checked, indeterminate) {
console.log(data, '數(shù)據(jù)')
console.log(checked, '選中狀態(tài)')
console.log(indeterminate, '子樹中選中狀態(tài)')
// 獲取當(dāng)前選擇的id在數(shù)組中的索引
const indexs = this.selectOrg.orgsid.indexOf(data.id)
// 如果不存在數(shù)組中尤泽，并且數(shù)組中已經(jīng)有一個id并且checked為true的時候，代表不能再次選擇。
if (indexs < 0 && this.selectOrg.orgsid.length === 1 && checked) {
console.log('only one')
this.$message({
message: '只能選擇一個區(qū)域安吁！',
type: 'error',
showClose: true
})
// 設(shè)置已選擇的節(jié)點(diǎn)為false 很重要
this.$refs.tree.setChecked(data, false)
} else if (this.selectOrg.orgsid.length === 0 && checked) {
// 發(fā)現(xiàn)數(shù)組為空 并且是已選擇
// 防止數(shù)組有值醉蚁，首先清空，再push
this.selectOrg.orgsid = []
this.selectOrg.orgsid.push(data.id)
} else if (
indexs >= 0 &&
this.selectOrg.orgsid.length === 1 &&
!checked
) {
// 再次直接進(jìn)行賦值為空操作
this.selectOrg.orgsid = []
}
}
總結(jié)
拿走不謝的同時也可以提出不好不科學(xué)的地方鬼店，留下更好更科學(xué)的方法和思路网棍。一起學(xué)習(xí)完善，造福程序界妇智。
