开发进度提前50%,啊,真香。
下面,看图说话
Table树形数据
Cascader级联选择器
功能实现+详细代码
Cascader级联选择器
options
属性指定选项数组即可渲染出一个级联选择器,所以后端接口返回的数据结构要保持一一致性,这样处理起来会省很多事。
element官网给出的options
需要的数据格式:
options: [{
value: 'zhinan',
label: '指南',
children: [{
value: 'shejiyuanze',
label: '设计原则'
}]
}]
后端接口返回的数据格式:
我们需要把后端返回的数据做一下处理,来满足options
的需要的标准格式:
handleAdd() {
this.$api.rechargeclass.list().then(res => {
this.$set((this.optionclass = this.getTreeData(res)))
})
},
getTreeData(data) {
for (var i = 0; i < data.length; i++) {
data[i].label = data[i].class
data[i].value = data[i].id
if (data[i].children.length < 1) {
data[i].children = undefined //避免children为空的时候,下一级显示为空白
} else {
this.getTreeData(data[i].children)
}
}
return data
},
注意:data[i].children = undefined
这里的判断一定需要的,否则你会掉到大坑里
实现cascader组件:
<template v-slot:pid="{ form, formItemKey }">
<el-cascader
v-model="form[formItemKey]"
:options="optionclass"
@change="handleChange"
clearable
show-all-levels
:props="{ checkStrictly: true }"
style="width:350px"
></el-cascader>
</template>
handleChange(value) {
console.log(value)
},
注意:这里为了业务需求,用slot插槽,可以选择性忽略
到这里级联选择器就写完了。
Table树形数据
当我按部就班准备写Table列表时,就发现了神奇的一幕,如开篇图所示,树形结构自动生成了,当时我就震惊了。。。
马上翻开文档:
好家伙,你品,你细细品,children的伟大之处就在于此了
说到这里,想想刚不久和后端小哥哥约定的传过来的child字段改成children,真是起了大作用。
没事多看看文档api真的很重要啊!