el-checkbox如果绑定不为string / number / boolean时,是无法回显的。
而在获取参数对绑定参数进行JSON.stringify转换即可解决回显问题,如若在提交时保持数据结构一致,则再进行JSON.parse转换即可。
<template>
<el-checkbox v-model="JSON.stringify(checked)">备选项</el-checkbox>
<el-button type="primary" @click="onSubmit">提交</el-button>
</template>
<script>
export default {
data() {
return {
checked: {a: 1, b: 2}
};
},
methods: {
getList() {
// 此处获取数据
...
// 回显
this.checked = JSON.stringify(res.content)
},
onSubmit() {
// 传参
const temp = JSON.parse(this.checked)
// 此处提交数据
...
}
}
};
</script>
同时该操作也可同用于el-checkbox-group
<template>
<el-checkbox-group v-model="dataList">
<el-checkbox
v-for="(item, index) in checkList"
:label="JSON.stringify(item)"
:key="index"
>
{{ item.a }}
</el-checkbox>
</el-checkbox-group>
<el-button type="primary" @click="onSubmit">提交</el-button>
</template>
<script>
export default {
data () {
return {
dataList: [],
checkList: [
{ a: 1, b: 2},
{ a: 11, b: 22},
{ a: 111, b: 222}
]
};
},
methods: {
getList() {
// 此处获取数据
...
// 回显
this.dataList = res.content.map(item => JSON.stringify(item))
},
onSubmit() {
// 传参
const temp = this.dataList.map(item => JSON.parse(item))
// 此处提交数据
...
}
}
};
</script>
如有疑问,欢迎讨论