最近在开发我的项目，用到了element-ui的多选框性能，因为前端渲染的字段和提交给后端的字段不统一，还是参考了其余的我的项目中的性能，才实现。上面记录一下：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>element-ui中Checkbox 多选框应用后端返回的数据</title> <!--引入 element-ui 的款式，--> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> <!-- 引入element 的组件库--> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <style> * { margin: 0; padding: 0; } #app { margin: 100px; } </style></head><body> <div id="app"> <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="流动性质"> <el-checkbox-group v-model="form.checkList"> <el-checkbox label="1">上海</el-checkbox> <el-checkbox label="2">南京</el-checkbox> </el-checkbox-group> </el-form-item> <el-button type="primary" @click="onSubmit">立刻创立</el-button> </el-form-item> </el-form> </div> <script> new Vue({ el: '#app', data() { return { // 模仿ajax返回的数据 ajaxDate: { // city1返回0的时候应该选中， 返回空字符串'' 应该不选中 city1: '', // city1返回0的时候应该选中， 返回空字符串'' 应该不选中 city2: '', }, // 本地渲染 form: { checkList: [], } } }, created() { // 模仿ajax返回的数据 setTimeout(() => { this.ajaxDate.city1 == '0' ? this.form.checkList.push('1') : ''; this.ajaxDate.city2 == '0' ? this.form.checkList.push('2') : ''; }, 500) }, methods: { // 本地渲染的值转换为要传递给后端定义的值 checkConvertFun(dataList, val) { if (dataList && dataList.length > 0) { return dataList.indexOf(val) > -1 ? '0' : '' } else { return '' } }, // 表单提交 onSubmit() { const city1 = this.checkConvertFun(this.form.checkList, '1'); const city2 = this.checkConvertFun(this.form.checkList, '2'); const param = { ...this.ajaxDate, ...{ city1, city2 } }; console.log(param, '传递ajax的参数') } } }) </script></body></html>