Vue之checkbox多選框的實(shí)際應(yīng)用
需求：打開(kāi)彈窗后，給醫(yī)生提供多選框用來(lái)選擇人群屬性，如果是選中的則狀態(tài)為已勾選，否則是未勾選。確認(rèn)后向后臺(tái)提交，在其他界面顯示該用戶(hù)的屬性；下次再打開(kāi)時(shí)，則選中狀態(tài)為已選的內(nèi)容，醫(yī)生可根據(jù)實(shí)際情況進(jìn)行再次操作。
打開(kāi)效果：
代碼實(shí)現(xiàn)：
彈窗樣式如下：
<div>
? ?<!--打開(kāi)彈窗操作在表格中設(shè)置為按鈕，可以讀取到表格行的id，handleAddPeople(row)-->
<el-dialog title="人群屬性"
? ? ? ? ? ? ? :visible.sync="dialogAddPeople"
? ? ? ? ? ? ? width="40%">
? ? ?<el-form ref="addPeopleForm"
? ? ? ? ? ? ? :model="addPeopleForm"
? ? ? ? ? ? ? label-position="top">
? ? ? ?<el-form-item label="請(qǐng)選擇當(dāng)前用戶(hù)的人群屬性：">
? ? ? ? ?<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">
? ? ? ? ?確認(rèn)
? ? ? ?</el-button>
? ? ?</div>
? ?</el-dialog>
</div>
數(shù)據(jù)如下：
data() {
return {
?// 添加人群屬性
? ? ?dialogAddPeople: false,
? ? ?peoples: [], // 存儲(chǔ)人群屬性
? ? ?check: [], // 存儲(chǔ)label
? ? ?values: [], // 存儲(chǔ)value
?// 需提交的列表
? ? ?addPeopleForm:{
? ? ? ?crowdList:[
? ? ? ? ?{
? ? ? ? ? ?dictValue: null,
? ? ? ? ? ?dictLabel: null,
? ? ? ? ? ?patientId: null,
? ? ? ? ?}
? ? ? ?],
? ? ? ?patientId: null,
? ? ?},
? ? ?patientId: null, //患者id
}
}
方法如下：
methods: {
? ?// 查看人群屬性操作
? ?handleAddPeople(row) {
? ? ?// 打開(kāi)前置空
? ? ?this.peoples = [] // 存放人群屬性數(shù)據(jù)
? ? ?this.check = [] // 存放label數(shù)據(jù)
? ? ?this.values = [] // 存放value數(shù)據(jù)
? ? ?this.dialogAddPeople = true;
? ? ?this.patientId = row.id // 根據(jù)當(dāng)前行獲取id
? ? ?searchPeopleAttribute({patientId: this.patientId}).then(response => {
? ? ? ?this.peoples = response.data;
? ? ? ?// console.log(this.peoples)
? ? ? ?// 把remark為selected的項(xiàng)存入，即存入當(dāng)前已被選中的屬性，下次打開(kāi)后自動(dòng)勾選
? ? ? ?// 判斷存入這一步需寫(xiě)在內(nèi)部，否則執(zhí)行順序出問(wèn)題
? ? ? ?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)))
? ? ?})
? ?},
? ?// 打印動(dòng)態(tài)label數(shù)據(jù)
? ?handleCheckChange() {
? ? ?// console.log("dynamic_label",JSON.parse(JSON.stringify(this.check)))
? ?},
? ?// 打印動(dòng)態(tài)value數(shù)據(jù)
? ?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)))
? ?},
? ?// 提交設(shè)置人群
? ?handleSuretoAddPeople() {
? ? ?// 獲取查看患者的id
? ? ?this.addPeopleForm.patientId = this.patientId
? ? ?// 獲取dictValue和dictLabel值
? ? ?// 根據(jù)后端的形式進(jìn)行提交
? ? ?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'
// 查詢(xún)?nèi)巳簩傩?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
?})
}
提交模擬數(shù)據(jù)如下：
{
"patientId":1,
"crowdList":[
? {"dictLable":"高血壓","patientId":1,"dictValue":"2"},
? {"dictLable":"老年人","patientId":1,"dictValue":"1"},
? {"dictLable":"糖尿病","patientId":1,"dictValue":"3"}
]
}
鏈接：https://www.dianjilingqu.com/647448.html
