实现多选下拉框后,表单中的内容不在是字符串的类型,而是变成了数组的类型,点击添加按钮后,会报错的,因为原来该字段的类型是字符串,类型不匹配。
解决方案:
1. 首先需要在添加事件中处理数据,然后再传给后端
需要将数组类型的数据转为字符串的类型,然后再提交表单,将传递给后端
let ct = []
if (this.form.collegeType){
for (let i=0; i<this.form.collegeType.length; i++) {
ct.push(this.form.collegeType[i])
}
this.form.collegeType = ct.join("-") // 通过"-"连接成字符串
console.log(this.form.collegeType, "this.form.collegeType") // ?-?
}
2. 前端处理从后端查询的数据
数据以字符串的形式添加到数据库后,前端需要查询数据,并需要再将字符串类型转为数组类型,便于使用
/* 处理从后端返回前端的学校类型 */
let TypeArr = [];
this.collegeList.forEach((college, index) => {
if (index >= this.newCollegeTypeArr.length) {
const arrCollegeTypes = college.collegeType.split("-");
arrCollegeTypes.forEach(type => {
TypeArr.push(parseInt(type));
});
}
});
this.newCollegeTypeArr = TypeArr;
this.form.collegeType = this.newCollegeTypeArr;
console.log(this.form.collegeType, "this.newCollegeTypeArr111")
3. 利用数据
我主要是需要遍历数据,将数据以字典中标签的形式展示出来
<el-table-column label="学校类型" align="center" prop="collegeType" min-width="300%">
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_school_type" v-for="(type,index) in scope.row.collegeType" :key="`${index}-${type}`" :value="type"
:separator="' '"/>
</template>
</el-table-column>