需求:根据A列的内容,B列显示下拉框,文本,数值类型的数据
总思路:设置元素点击(cell-click)、双击事件(cell-dblclick),拿到当前行的数据,监听当前行的A列,如果变化,B列做相应处理。文本和数值通过input中的type设置。
min=“0”,表示数值最小为0
<vxe-tableref="specialHandTable"border:scroll-y="{ enabled: false }"height="320"align="center"size="mini":column-config="{ resizable: true }":data="tableData":edit-config="{ trigger: 'click', mode: 'cell' }":row-config="{ isCurrent: true, isHover: true }"@cell-click="cellClickEvent"@cell-dblclick="cellClickEvent"><vxe-column type="seq" width="10%"></vxe-column> <vxe-column field="AColumn" title="A列数据" width="25%" :edit-render="{ enabled:IsEdit }"><template #edit="{ row }"><vxe-select v-model="row.AColumn" clearable filterable transfer @change="change(row)"><vxe-option v-for="item in AColumnList" :key="item" :label="item" :value="item" ></vxe-option></vxe-select></template></vxe-column><vxe-column field="BColumn" title="B列值" width="35%" :edit-render="{ enabled:IsEdit}"><template #default="{ row }"><span>{{ formatBColumnOptions(row) }}</span></template><template #edit="{ row }"><vxe-input v-if="!IsSelect" v-model="row.BColumn" :type="inputType" min="0"></vxe-input><vxe-select v-else v-model="row.BColumn" clearable filterable transfer multiple><vxe-option v-for="item in BColumnList" :key="item.SubItemCode" :label="item.SubItemName" :value="item.SubItemCode" ></vxe-option></vxe-select></template></vxe-column> </vxe-table>data()
{
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.length>0){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;} }}},