element-ui 级联选择器(Cascader)使用懒加载的回显
- 当我在回来看这篇文档的时候,我觉得我已经把懒加载写好了,基础的懒加载使用方法就不做记录了,如果不会移步这里
- 我目前的使用场景:
- 根据部门选择了销售人员,四级联动
- 给销售人员分配业务区域,for循环,动态添加, 四级联动
- 在回显的时候,因为懒加载数据并没有结束,所以会导致我们的虽然赋值成功,但是不会展示,此时我们值需要在一级列表内,对应的值的对象中添加一个children对象并赋值为空数组即可 直接上代码
- html部分
<el-form ref="businessForm" :model="businessForm" label-width="80px">
<el-form-item v-if="userId === 0" label="销售成员" prop="name" :rules="{required: true, message: '请选择销售成员', trigger: 'blur'}">
<el-cascader v-model="businessForm.name" :props="userProps" />
</el-form-item>
<el-form-item v-else label="销售成员" >
<el-input :value="userName" class="name-int" disabled />
</el-form-item>
<el-form-item
v-for="(item, index) in businessForm.areaList"
:key="item.id"
:label="index === 0 ? '业务区域' : ''"
:prop="'areaList.' + index + '.value'"
:rules="{required: false, validator: validArea, trigger: 'blur'}"
>
<div>
<el-cascader
v-model="item.value"
class="mr-10"
:props="areaPropsFun(item, index)"
/>
<el-button type="primary" plain @click="businessForm.areaList.splice(index + 1, 0, {value: '', id: Math.random().toString(16).slice(2)}) ">+</el-button>
<el-button v-if="businessForm.areaList.length > 1" type="danger" plain @click="businessForm.areaList.splice(index, 1)">-</el-button>
</div>
</el-form-item>
</el-form>
- js部分
data() {
const that = this
const validArea = (rule, value, callback) => {
// 校验方法
}
return {
businessForm: {
name: '',
areaList: []
},
userProps: {
lazy: true,
async lazyLoad (node, resolve) {
const { level } = node;
let data = []
// 获取数据 data = xxx
resolve(data)
}
},
areaPropsFun(item) {
// item为业务区域对应的值
let lazyLoad = async (node, resolve) => {
const { level } = node;
let data = []
// 获取数据 data = xxx
//
if (level === 0) {
data = [
{
label: "一级数据1",
value: "1"
},
{
label: "一级数据2",
value: "2"
},
{
label: "一级数据3",
value: "3"
}
]
// 这里只是举例,具体的看业务
// 如果选中的一级数据是2那直接给data[1]添加children就可以了 后面组件会自动补全
if (item.value[0] === '2') {
data[1].children = []
}
}
resolve(data)
}
return {
lazy: true,
lazyLoad
}
},
validArea
}
}
ps: 此文章做个人平常记录,若是有幸帮到朋友,但求一赞