阿里国际站网站建设,坑梓做网站,小企业网站建设哪些好办,网站建设开发模式h5需求#xff1a;根据A列的内容#xff0c;B列显示下拉框#xff0c;文本#xff0c;数值类型的数据 总思路#xff1a;设置元素点击(cell-click)、双击事件(cell-dblclick)#xff0c;拿到当前行的数据#xff0c;监听当前行的A列#xff0c;如果变化#xff0c;B列做…需求根据A列的内容B列显示下拉框文本数值类型的数据 总思路设置元素点击(cell-click)、双击事件(cell-dblclick)拿到当前行的数据监听当前行的A列如果变化B列做相应处理。文本和数值通过input中的type设置。 min“0”表示数值最小为0
vxe-tablerefspecialHandTableborder:scroll-y{ enabled: false }height320aligncentersizemini:column-config{ resizable: true }:datatableData:edit-config{ trigger: click, mode: cell }:row-config{ isCurrent: true, isHover: true }cell-clickcellClickEventcell-dblclickcellClickEventvxe-column typeseq width10%/vxe-column vxe-column fieldAColumn titleA列数据 width25% :edit-render{ enabled:IsEdit }template #edit{ row }vxe-select v-modelrow.AColumn clearable filterable transfer changechange(row)vxe-option v-foritem in AColumnList :keyitem :labelitem :valueitem /vxe-option/vxe-select/template/vxe-columnvxe-column fieldBColumn titleB列值 width35% :edit-render{ enabled:IsEdit}template #default{ row }span{{ formatBColumnOptions(row) }}/span/templatetemplate #edit{ row }vxe-input v-if!IsSelect v-modelrow.BColumn :typeinputType min0/vxe-inputvxe-select v-else v-modelrow.BColumn clearable filterable transfer multiplevxe-option v-foritem in BColumnList :keyitem.SubItemCode :labelitem.SubItemName :valueitem.SubItemCode /vxe-option/vxe-select/template/vxe-column /vxe-tabledata()
{
return{
AColumnList:[],//A列下拉框数据
BColumnList:[],//B列下拉框数据
inputType:text,
tableData:[],//table数据
selectedRow:null,//选中的值
IsSelect:false,//BColumn是否显示下拉框
}
}methods:{cellClickEvent({ row, rowIndex }){this.selectedRow row;this.selectedRow.RowIndex rowIndex;},//改变A列的值清空对应B列的值change(row){if(row.AColumn 下拉框){this.$set(this.selectedRow,BColumn,[]); }else{this.$set(this.selectedRow,BColumn,); }},async AColumnChange(name){this.IsSelect false;this.BColumnList[];this.inputType text;switch(name){case 下拉框://下拉框this.IsSelect true;await GetBColumnList().then((res) {this.BColumnList res.Data.Data.map((item){return {SubItemName: item.名称,SubItemCode: item编码.}})});break;case 数值:this.inputType number;break;default:break;}},//转换BColumn下拉框的值formatBColumnOptions(row){if(row.AColumn 下拉框){let options this.BColumnList;const item options.filter((item) row.BColumn.includes(item.SubItemCode))let value ;if(item.length0){value item.map((t) {return t.SubItemName;}).join(,);}return value; }else{return row.BColumn;} },
},watch: {selectedRow.AColumn:{deep:true,handler(val){if(val!undefined){this.AColumnChange(val);}else{this.IsSelect false;} }}},
