Vue之checkbox多选框的实际应用
需求：打开弹窗后，给医生提供多选框用来选择人群属性，如果是选中的则状态为已勾选，否则是未勾选。确认后向后台提交，在其他界面显示该用户的属性；下次再打开时，则选中状态为已选的内容，医生可根据实际情况进行再次操作。
打开效果：
代码实现：
弹窗样式如下：
<div>
<!--打开弹窗操作在表格中设置为按钮，可以读取到表格行的id，handleAddPeople(row)-->
<el-dialog title="人群属性"
:visible.sync="dialogAddPeople"
width="40%">
<el-form ref="addPeopleForm"
:model="addPeopleForm"
label-position="top">
<el-form-item label="请选择当前用户的人群属性：">
<el-checkbox-group v-model="check" @change="handleCheckChange">
<el-checkbox class="el-checkbox-width" v-for="(people, index) in peoples" :value="people.dictValue" :label="people.dictLabel" :key="index" @change="handleValuesChange(people)">{{ people.dictLabel }}</el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-form>
<div slot="footer"
class="dialog-footer">
<el-button type="cancel"
@click="dialogAddPeople = false">
取消
</el-button>
<el-button type="primary"
@click="handleSuretoAddPeople">
确认
</el-button>
</div>
</el-dialog>
</div>
数据如下：
data() {
return {
// 添加人群属性
dialogAddPeople: false,
peoples: [], // 存储人群属性
check: [], // 存储label
values: [], // 存储value
// 需提交的列表
addPeopleForm:{
crowdList:[
{
dictValue: null,
dictLabel: null,
patientId: null,
}
],
patientId: null,
},
patientId: null, //患者id
}
}
方法如下：
methods: {
// 查看人群属性操作
handleAddPeople(row) {
// 打开前置空
this.peoples = [] // 存放人群属性数据
this.check = [] // 存放label数据
this.values = [] // 存放value数据
this.dialogAddPeople = true;
this.patientId = row.id // 根据当前行获取id
searchPeopleAttribute({patientId: this.patientId}).then(response => {
this.peoples = response.data;
// console.log(this.peoples)
// 把remark为selected的项存入，即存入当前已被选中的属性，下次打开后自动勾选
// 判断存入这一步需写在内部，否则执行顺序出问题
for (var i = 0; i < this.peoples.length; i++) {
// console.log(this.peoples[i].remark)
if (this.peoples[i].remark == 'selected') {
this.check.push(this.peoples[i].dictLabel)
this.values.push(this.peoples[i].dictValue)
}
}
// console.log("initial_label",JSON.parse(JSON.stringify(this.check)))
// console.log("initial_value",JSON.parse(JSON.stringify(this.values)))
})
},
// 打印动态label数据
handleCheckChange() {
// console.log("dynamic_label",JSON.parse(JSON.stringify(this.check)))
},
// 打印动态value数据
handleValuesChange(people) {
if(this.values.indexOf(people.dictValue) == -1) {
this.values.push(people.dictValue);
}
else {
this.values.splice(this.values.indexOf(people.dictValue),1)
}
// console.log("dynamic_value",JSON.parse(JSON.stringify(this.values)))
},
// 提交设置人群
handleSuretoAddPeople() {
// 获取查看患者的id
this.addPeopleForm.patientId = this.patientId
// 获取dictValue和dictLabel值
// 根据后端的形式进行提交
for(var i = 0; i < this.check.length; i++) {
const p = {}
p.dictLabel = this.check[i].toString()
p.dictValue = this.values[i].toString()
p.patientId = this.patientId
this.addPeopleForm.crowdList[i] = p
}
// alert(JSON.stringify(this.addPeopleForm))
modifyPeopleAttribute(this.addPeopleForm).then(() => {
this.dialogAddPeople = false;
this.$notify({
title: "成功",
message: "添加人群属性成功",
type: "success",
duration: 2000,
});
})
this.dialogAddPeople = false;
},
}
axios接口如下：
import request from '@/utils/request'
// 查询人群属性
export function searchPeopleAttribute(query) {
return request({
url: '/patients/crowd/crowList',
method: 'get',
params: query
})
}
// 修改人群属性
export function modifyPeopleAttribute(data) {
return request({
url: '/patients/crowd',
method: 'post',
data
})
}
提交模拟数据如下：
{
"patientId":1,
"crowdList":[
{"dictLable":"高血压","patientId":1,"dictValue":"2"},
{"dictLable":"老年人","patientId":1,"dictValue":"1"},
{"dictLable":"糖尿病","patientId":1,"dictValue":"3"}
]
}
链接：https://www.dianjilingqu.com/647448.html
