文章目录
- 效果
- 代码
- 其他实现方式
效果
代码
<div id="app">
<el-form size="medium" label-width="85px" class="retail-form" label-position="right">
<el-form-item v-for="(item, index) in allData" :key="index" label="产品类别:">
<el-radio-group v-model="item.radio" @change="classChange($event,item)">
<el-radio-button :label="0">全部</el-radio-button>
<el-radio-button v-for="(childItem, childIndex) in item.value" :key="childIndex" :label="childItem.Id">{{ childItem.Name }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item v-for="(leveItem, leveIndex) in levelArr" v-if="leveItem.children" :key="leveIndex" label="产品级别">
<el-radio-group v-model="leveItem.radio" @change="deepLevelChange($event, leveItem, leveIndex)">
<el-radio-button :label="0">全部{{ leveItem.radio }}</el-radio-button>
<el-radio-button v-for="(childItem, childIndex) in leveItem.children" :key="childIndex" :label="childItem.Id">{{ childItem.Name }}</el-radio-button>
</el-radio-group>
</el-form-item>
</el-form>
</div>
var Main = {
data() {
return {
allData: [
{ 'Id': 1, 'Pid': 0, 'Name': 'CCCF自愿1', 'Dep': 7, 'Level': 1, 'Remark': null, 'Sort': null, 'reserve_1': null },
{ 'Id': 2, 'Pid': 0, 'Name': 'CCCF自愿2', 'Dep': 9, 'Level': 1, 'Remark': null, 'Sort': null, 'reserve_1': null },
{ 'Id': 3, 'Pid': 0, 'Name': 'CCCF自愿3', 'Dep': 8, 'Level': 1, 'Remark': null, 'Sort': null, 'reserve_1': null },
{ 'Id': 4, 'Pid': 1, 'Name': '防火材料', 'Dep': 7, 'Level': 2, 'Remark': null, 'Sort': null, 'reserve_1': null },
{ 'Id': 5, 'Pid': 1, 'Name': '建筑耐火', 'Dep': 7, 'Level': 2, 'Remark': null, 'Sort': null, 'reserve_1': null },
{ 'Id': 6, 'Pid': 1, 'Name': '消防防烟排烟', 'Dep': 7, 'Level': 2, 'Remark': null, 'Sort': null, 'reserve_1': null },
{ 'Id': 7, 'Pid': 2, 'Name': '防火材料', 'Dep': 9, 'Level': 2, 'Remark': null, 'Sort': null, 'reserve_1': null },
{ 'Id': 8, 'Pid': 2, 'Name': '建筑耐火构件', 'Dep': 9, 'Level': 2, 'Remark': null, 'Sort': null, 'reserve_1': null },
{ 'Id': 9, 'Pid': 2, 'Name': '消防防烟排烟', 'Dep': 9, 'Level': 2, 'Remark': null, 'Sort': null, 'reserve_1': null },
{ 'Id': 10, 'Pid': 3, 'Name': '消防防烟排烟', 'Dep': 8, 'Level': 2, 'Remark': null, 'Sort': null, 'reserve_1': null },
{ 'Id': 11, 'Pid': 4, 'Name': '测试第三级1', 'Dep': 8, 'Level': 3, 'Remark': null, 'Sort': null, 'reserve_1': null },
{ 'Id': 12, 'Pid': 5, 'Name': '测试第三级2', 'Dep': 8, 'Level': 3, 'Remark': null, 'Sort': null, 'reserve_1': null },
{ 'Id': 13, 'Pid': 6, 'Name': '测试第三级3', 'Dep': 8, 'Level': 3, 'Remark': null, 'Sort': null, 'reserve_1': null },
{ 'Id': 14, 'Pid': 7, 'Name': '测试第三级4', 'Dep': 8, 'Level': 3, 'Remark': null, 'Sort': null, 'reserve_1': null }
],
levelArr: []
}
},
mounted() {
this.allData = this.joinLevel(this.allData)
},methods: {
classChange(e, item) {
console.log(e, '这个列表需要的id')
console.log(item.radio, 'item')
// 重置leveItem.radio
// 点击第一层单独处理
// 清空LevelArr
if (item.radio !== 0) {
this.levelArr = []
// 拿到对应的第几个
this.levelArr.splice(0, 1, item.value.filter(items => {
items.radio = 0
return `${items.Id}` === `${item.radio}`
})[0])
} else {
this.levelArr = []
}
this.$forceUpdate()
console.log(this.levelArr, 'levelArr')
},
deepLevelChange(e, item, index) {
console.log(item.radio, '这个列表需要的id')
// console.log(index, '这个item所处于LevelArr的下标')
// 这里就去改对应的levelArr的index往后的一个的位置
if (item.radio !== 0) {
const cuttentItem = item.children.filter(items => {
return `${items.Id}` === `${item.radio}`
})[0]
if (cuttentItem) {
cuttentItem.radio = 0
this.levelArr.splice(index + 1, 1, cuttentItem)
}
} else {
this.levelArr = this.levelArr.slice(0, index + 1)
}
this.$forceUpdate()
},
// 这是整理数据格式变成好判断的格式
joinLevel(data) {
const result = []
const map = {}
// 声明一个对象拿来装分组
data.map(item => {
// 遍历数组
if (!map[`${item.Level}`]) {
// 如果发现Level不存在于对象里,就说明这是新的level,那么就把这个新赋值到map里
map[`${item.Level}`] = [item]
} else {
// 否则就说明,我已经创建过这个等级的值了,而且值为【item】那我就直接push进去
map[`${item.Level}`]['push'](item)
}
})
// 这里就拿到了一个根据Level为对象名字,值为数组装着相同Level的值的item的数组
// {
// '2': [item1,item2],
// '3': [item4,item4]
// }
// 然后你可以做别的操作
// 我这里给你转成数组对象的格式
Object.keys(map).map(key => {
// 这里的key就是 map的key ,2, 3那个 值就是对应的数组
result.push({
level: key,
value: map[key],
radio: 0
})
})
// 现在的格式是[{level, value}]这种格式 继续加工处理
result.reverse()
// 把这个数组反转,按照level登记最大的在最前,遍历这个按照level等级生成的数组
result.map((item, index) => {
// 按照从最后往前的方式,这里第一个就是之前的最后一个,我们把最后一个里面的item,按照它自己的pid插入到之前一个等级的children里面成为它的子集
const before = result[index + 1] // 因为我们是反着的数组所以是+1,否则应该是-1
if (before) {
item.value.map(currentValueItem => {
before.value.map(beforeValueItem => {
if (`${beforeValueItem.Id}` === `${currentValueItem.Pid}`) {
if (Array.isArray(beforeValueItem.children)) {
beforeValueItem.children.push(currentValueItem)
} else {
beforeValueItem.children = [currentValueItem]
}
}
})
})
}
})
// 经过上面的处理,一层一层嵌套下去,最终的就只需要level是1的,其他的都不需要了
// 就是说最后一个就是
// [{
// level: 1,
// value: [{
// Level: 1,
// children: [{
// Level: 2,
// children: [] // 如果里面有3就会继续嵌套,没有子集就没有children
// }]
// }]
// }]
return result.slice(-1)
},
}
}
其他实现方式
其他实现方式:vue element 实现 多个单选、分类联动(2)