1.后台要的数据格式
{"userInfo":"1111114111","approveStaffName":"李四","orgName":"研发支持","data":[{"sectionCode":"120324","sectionName":"财务部"},{"sectionCode":"string","sectionName":"集团板块"}]}
结构,key值一定不能重复
<el-form-item label="板块权限" class="plateBox">
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
<el-checkbox-group class="plate" v-model="checkedCities" @change="handleCheckedCitiesChange">
<el-checkbox v-for="(city,index) in cities" :label="city" :key="city.sectionCode+index"
>
{{city.sectionName}}
</el-checkbox>
</el-checkbox-group>
</el-form-item>
//确认按钮
<div class="dialog_button">
<el-button type="primary" @click="submitForm('dialogForm')">确定</el-button>
<el-button @click="dialogVisible=false">取消</el-button>
</div>
js
1.data定义的数据
data() {
return {
//全选、多选
checkAll: false,
checkedCities: [],//全选的数据
cities: [],//所有的数据
cityOptions:[],//单选的全部数据
isIndeterminate: false,
//添加
dialogForm: {
userInfo:'',//工号/姓名
approveStaffName:'',//姓名
orgName:'',//部门
data:[]
},
}
}
2.新增的时候获取多选的数据(调用后台接口,获取到想要的数据)
//新增
addRelease() {
this.dialogForm.userInfo='';
this.dialogForm.approveStaffName='';
this.dialogForm.orgName='';
this.dialogTitle = '添加用户';
this.dialogVisible = true;
//多选
contentAuditAuthMngApi.findListPlate().then(res=>{
if(res.status===0){
console.log(res);
this.cities=[];
for(let i=0; i<res.data.length;i++){//注意!!!在这里一定把code和name都放cities里面
this.cities.push({
sectionName:res.data[i].sectionName,
sectionCode:res.data[i].sectionCode
});
}
}
console.log(this.cities);
}) .catch((error) => {
console.log('/sectionMsg/findAllSectionData多选, error)
});
},
3.全选和多选
//全选
handleCheckAllChange(val) {
this.checkedCities = val ? this.cities : [];
this.isIndeterminate = false;
this.dialogForm.data=this.checkedCities;//全选数据
},
//多选
handleCheckedCitiesChange(value) {
//组装多选的数据,然后把组装好的数据给添加的参数
this.dialogForm.data=[];
for( let i=0; i<value.length; i++){
this.dialogForm.data.push({
sectionCode:value[i].sectionCode,
sectionName:value[i].sectionName
});
}
4.点击确认的时候给后台传值,添加完成
//添加的确认按钮
submitForm(formName){
console.log(this.dialogForm);
this.$refs[formName].validate((valid) => {
if (valid) {
contentAuditAuthMngApi.findListApproveUserAuthAdd(this.dialogForm).then(res=>{
console.log(res);
}) .catch((error) => {
console.log('/sectionMsg/findAllSectionData多选', error)
});
}
});
},
网友评论