弹框js:
<el-dialog
:title="states ? '新增角色' : '修改角色'"
:visible.sync="dialogFormVisible"
width="600px"
>
<el-form :model="form" :rules="rules" ref="form">
<el-form-item
label="部门名称"
:label-width="formLabelWidth"
prop="department_id"
>
<el-select v-model="form.department_id" placeholder="请选择部门">
<el-option
v-for="item in options[0]"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item
label="人员名称"
:label-width="formLabelWidth"
prop="person_name"
>
<el-select
@change="pickRole2"
v-model="form.person_name"
placeholder="请选择人员"
>
<el-option
v-for="item in options[1]"
:key="item.id"
:label="item.name"
:value="item"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item
label="人员角色"
:label-width="formLabelWidth"
prop="person_role_id"
>
<el-select v-model="form.person_role_id" placeholder="请选择角色">
<el-option
v-for="item in options[2]"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item
label="备注"
:label-width="formLabelWidth"
prop="desc_msg"
>
<el-col :span="18">
<el-input v-model="form.desc_msg" autocomplete="off"></el-input>
</el-col>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="sureDia('form')">提 交</el-button>
<el-button @click="cancelDia('form')">取 消</el-button>
</div>
</el-dialog>
data() {
return {
states:true,//控制新增/修改弹框
form: {
department_id: "",
person_name: "",
person_id: "",
person_role_id: "",
desc_msg: "",
},
methods: {
pickRole2(val) {
this.form.person_name = val.name;
this.form.person_id = val.id;
},