//table中:车组标签
<el-table
v-loading="listLoading"
:data="list"
>
<el-table-column label="车组标签" prop="tagList">
<template slot-scope="scope">
<span>{{ scope.row.tagList | getTagList(tagListType) }}</span>
</template>
</el-table-column>**
<el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
</template>
</el-table-column>
</el-table>
//from中
<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
<el-form
ref="dataForm"
:model="temp"
>
<el-form-item label="车组标签" prop="tagList[]">
<el-checkbox-group v-model="checkOne" @change="handleCheckedTagChange(id)">
<el-checkbox
v-for="(operate, index) in tagListType"
:label="operate.id"
:key="index"
>{{operate.value}}</el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取消</el-button>
<el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">提交</el-button>
</div>
</el-dialog>
//js:
export default {
filters: {
//在table中回显的车组标签
getTagList(tags, tagListType) {
if (tags === null || tags === "") {
return "--";
} else {
var tagStr=''
for (var i = 0; i < tagListType.length; i++) {
for(var j=0;j<tags.length;j++){
var tags1 = JSON.stringify(tagListType[i].id);
var tags2 = JSON.stringify(tags[j]);
if (tags1 === tags2) {
tagStr=tagStr+"," + tagListType[i].value;
}
}
}
return tagStr.substring(1,tagStr.length)
}
}
},
data() {
return {
checkOne: [],
tagListType: '',
temp: {
tagList: []
}
},
methods: {
//更新时
handleUpdate(row) {
this.temp = Object.assign({}, row) // copy obj
this.checkOne = this.temp.tagList
this.$nextTick(() => {
this.$refs["dataForm"].clearValidate()
})
},
//新建时
handleCreate() {
this.$nextTick(() => {
this.$refs["dataForm"].clearValidate();
})
},
//更新:点击提交
updateData() {
this.$refs["dataForm"].validate(valid => {
if (valid) {
const tempData = Object.assign({}, this.temp)
**tempData.tagList = this.checkOne**
const tempDatas = JSON.stringify(tempData)
carModelUpdate(tempDatas).then(() => {
for (const v of this.list) {
if (v.id === this.temp.id) {
const index = this.list.indexOf(v)
this.list.splice(index, 1, this.temp)
break;
}
}
this.dialogFormVisible = false;
this.$notify({
title: "成功",
message: "更新成功",
type: "success",
duration: 2000
})
this.fetchData()
})
}
})
},
//新建:点击提交
createData() {
this.$refs["dataForm"].validate(valid => {
if (valid) {
const tempData = Object.assign({}, this.temp);
tempData.tagList = this.checkOne;
const tempDatas = JSON.stringify(tempData);
carModelUpdate(tempDatas).then(() => {
for (const v of this.list) {
if (v.id === null) {
const index = this.list.indexOf(v);
this.list.splice(index, 1, this.temp);
break;
}
}
this.dialogFormVisible = false;
this.$notify({
title: "成功",
message: "新建成功",
type: "success",
duration: 2000
});
this.fetchData();
})
}
})
}
}
}
//后台:
List<OptionBean> tagListType = new ArrayList<>();
OptionBean optionBean = new OptionBean();
optionBean.setId("0");
optionBean.setValue("油电混合");
tagListType.add(optionBean);
optionBean = new OptionBean();
optionBean.setId("1");
optionBean.setValue("汽油车");
tagListType.add(optionBean);
optionBean = new OptionBean();
optionBean.setId("2");
optionBean.setValue("纯电动");
tagListType.add(optionBean);
map.put("tagListType", tagListType);
结果: