Cascader 级选择器的回显(实例)
对 Cascader 级选择器的 回显 的一个实例。照着写就能完成回显
·
效果显示:
思路:
1. 让后端创建一个空的JSON对象,用来存放数据,此处用的是 unitJson。
2. 首先在data中创建一个名为 checkUnitList
的对象,然后在拿到接口查询所有数据的时候,用this.checkUnitList = JSON.parse(res.data.unitJson)
,将值为null的对象unitJson
赋值给checkUnitList
。
3. 接着在<el-cascader></el-cascader>中用 v-model
绑定checkUnitList
。
4. 最后在提交方法createData()
中通过this.temp.unitJson = JSON.stringify(this.checkUnitList);
5. 将数据提交到数据库的unitJson
中,从而完成回显。
代码:
// template 中
<!-- 组织选择 -->
<el-form-item>
<el-form-item label="添加单位:" prop="groupId">
<el-cascader
ref="cascader"
:options="options"
:props="optionProps"
v-model="checkUnitList" // 3.v-model绑定checkUnitList
clearable
filterable
@change="handelChange()"
/>
</el-form-item>
</el-form-item>
// data() 中
data() {
return {
type: "", // 页面类别
id: "",
fullscreenLoading: false,
temp: {
id: "",
titleId: "",
groupName: "",
groupId: "",
headline: "",
isShow: "",
unitJson: "",
},
// 添加单位
options: [],
optionProps: {
value: "id",
label: "groupName",
children: "children",
multiple: true,
},
checkUnitList: [], // 2.定义一个checkUnitList,类型为数组
canEdit: true,
list: null,
// 选项卡
option: [
{
titleId: "1",
tabTitle: "选项卡一",
},
{
titleId: "2",
tabTitle: "选项卡二",
},
{
titleId: "3",
tabTitle: "选项卡三",
},
],
value: "",
};
},
// methods 中
methods: {
// 查询表彰党组织名单
getDetail() {
getCommend({ id: this.$route.query.id }).then((res) => {
this.temp = res.data;
// 1.在查询所有数据的时候,将res.data.unitJson赋值给checkUnitList
this.checkUnitList = JSON.parse(res.data.unitJson);
});
},
//创建/编辑数据
createData() {
// 4.将checkUnitList的数据提交到unitJson中
this.temp.unitJson = JSON.stringify(this.checkUnitList);
this.$refs["dataForm"].validate((valid) => {
if (valid) {
this.fullscreenLoading = true;
if (this.type === "add") {
saveCommend(this.temp)
.then((res) => {
this.fullscreenLoading = false;
this.$notify({
title: res.msg || "新增成功",
type: "success",
duration: "2000",
onClose: () => {
this.$router.back();
},
});
})
.catch(() => {
this.fullscreenLoading = false;
});
} else {
updateCommend(this.temp)
.then((res) => {
this.fullscreenLoading = false;
this.$notify({
title: res.msg || "修改成功",
type: "success",
duration: "2000",
onClose: () => {
this.$router.back();
},
});
})
.catch(() => {
this.fullscreenLoading = false;
});
}
} else {
console.log("valid err");
}
});
},
}
更多推荐
所有评论(0)