asp.net企业网站管理系统,制定商务网站建设时,html做音乐网站,多个域名绑定同一网站吗一般选中节点只会返回:value绑定的数据给v-model中#xff0c;要想获取id和name一并传给后端#xff0c;需要如下几步#xff1a; 1、给选择框添加点击事件 inputselectChangeParent 2、v-for中多添加一个参数 index
el-select v-modelinputForm.pr… 一般选中节点只会返回:value绑定的数据给v-model中要想获取id和name一并传给后端需要如下几步 1、给选择框添加点击事件 inputselectChangeParent 2、v-for中多添加一个参数 index
el-select v-modelinputForm.projectId filterable placeholder请选择 inputselectChangeParentel-optionv-for(item, index) in projectInfo:keyitem.id:labelitem.name:valueitem.id/el-option
/el-select 3、添加选择框点击事件的方法 selectChangeParent(index){let listData[];listData this.projectInfo;for (let i 0; i listData.length ; i) {if ( listData[i].idthis.inputForm.projectId){this.inputForm.projectNamelistData[i].name}}}, 这是我在data中下拉框的数据结构 projectInfo: {id: ,name: }, 总体思路点击事件触发时获取到点击的id后再和v-for绑定的数组做对比对比时projectInfo的id和点击选择的id相同时给inputForm里的对象赋值
完整代码
%
layout(/include/_vue_body.html, {title:列表, parent:隐患处理}){
%
stylebody {background: #ffffff !important;}
/style
div idapp classbg-whiteel-form :modelinputForm sizesmall refinputForm v-loadingloadinglabel-width120pxel-row :gutter15el-col :span12el-form-item label隐患名称 prophiddenName:rules[{required: true, message:隐患名称不能为空, trigger:blur}]el-input v-modelinputForm.hiddenName placeholder请填写隐患名称 maxlength25/el-input/el-form-item/el-colel-col :span12el-form-item label整改措施 prophiddenMeasurId:rules[]el-select v-modelinputForm.hiddenMeasurId filterable placeholder请选择el-optionv-foritem in hiddenMeasureList:keyitem.id:labelitem.measureName:valueitem.id/el-option/el-select/el-form-item/el-colel-col :span12el-form-item label整改负责人 propprincipal:rules[]fs-user-select:is_layertrue:limit1:valueinputForm.principalget-value(value) { inputForm.principal value}/fs-user-select/el-form-item/el-colel-col :span12el-form-item label整改监督人 propsupervision:rules[]fs-user-select:is_layertrue:limit1:valueinputForm.supervisionget-value(value) { inputForm.supervision value}/fs-user-select/el-form-item/el-colel-col :span12el-form-item label隐患类型 prophiddenType:rules[]el-select v-modelhiddenType changeselectProjectTypeel-option v-foritem in hiddenTypeList :keyitem.value :labelitem.label:valueitem.value/el-option/el-select/el-form-item/el-colel-col :span12el-form-item label所属项目 propprojectId:rules[]el-select v-modelinputForm.projectId filterable placeholder请选择 inputselectChangeParentel-optionv-for(item, index) in projectInfo:keyitem.id:labelitem.name:valueitem.id/el-option/el-select/el-form-item/el-colel-col :span24el-form-item label隐患地点 propaddress:rules[]el-input v-modelinputForm.address placeholder请填写隐患地点 maxlength64show-word-limit/el-input/el-form-item/el-colel-col :span24el-form-item label隐患详情 prophiddenDetail:rules[]el-input :rows6 typetextarea v-modelinputForm.hiddenDetail placeholder请填写隐患详情maxlength200 show-word-limit/el-input/el-form-item/el-colel-col :span12el-form-item label隐患图片 prophiddenUrl:rules[]fs-upload-imgs v-modelinputForm.hiddenUrl/fs-upload-imgs/el-form-item/el-col/el-row/el-form
/div
scriptvar formContainer new Vue({el: #app,mixins: [sharpMixin],data() {return {loading: false,inputForm: {id: ${hiddenInfo.id},hiddenName: ,principal: ,supervision: ,hiddenUrl: ,hiddenDetail: ,address: ,projectId: ,hiddenMeasurId: ,projectType: ,projectName:,hiddenMeasurName: },hiddenType: ,hiddenTypeList: [],projectInfo: {id: ,name: },hiddenMeasure:{id: ,measureName: ,},hiddenMeasureList:[]}},created() {let that thisthis.clearForm(function () {if (that.inputForm.id ! ) {that.loadData()}});this.hiddenTypeList this.getDictList(hidden_type)this.initHiddenMeasure()},methods: {loadData() {this.loading truethis.get(${ctx}/safety/hiddenInfo/info, {id: this.inputForm.id}).then((res) {if (res.data) {this.inputForm res.datathis.hiddenType this.inputForm.projectType}this.initBasicData()this.selectProjectType()this.loading false})},selectChangeParent(index){let listData[];listData this.projectInfo;for (let i 0; i listData.length ; i) {if ( listData[i].idthis.inputForm.projectId){this.inputForm.projectNamelistData[i].name}}},initBasicData() {let initData {}Object.assign(this.inputForm, initData);},initHiddenMeasure(){this.get(${ctx}/safety/hiddenMeasure/hiddenList).then((res) {if (res.data) {this.hiddenMeasureList res.data}})},initProjectData(type) {this.get(${ctx}/safety/hiddenInfo/findProjectInfo?type type).then((res) {if (res.data) {this.projectInfo res.data}})},initBuildData(type) {this.get(${ctx}/safety/hiddenInfo/findProjectInfo?type type).then((res) {if (res.data) {this.projectInfo res.data}})},initRoomData(type) {this.get(${ctx}/safety/hiddenInfo/findProjectInfo?type type).then((res) {if (res.data) {this.projectInfo res.data}})},selectProjectType() {this.inputForm.projectType this.hiddenTypelet type this.inputForm.projectTypeif (this.hiddenType 1) {//hiddenType为1时查询在建项目信息this.projectInfo this.initProjectData(type)} else if (this.hiddenType 2) {//hiddenType为2时查询建筑物信息this.projectInfo this.initBuildData(type)} else {//hiddenType为3时查询房屋信息this.projectInfo this.initRoomData(type)}},clearForm(call) {let that thissetTimeout(function () {that.$refs[inputForm].resetFields();if (call) {call();}}, 300)},// 提交doSubmit(call) {this.$refs[inputForm].validate((valid) {if (valid) {this.post(${ctx}/safety/hiddenInfo/save, this.inputForm).then((res) {if (res.success) {this.$message.success(res.msg)call()} else {this.$message.error(res.msg)}})} else {return false;}})}}})
/script
% } %
