淘宝联盟登记新网站,深圳公司注册地址可以是住宅吗,网站ftp用户名和密码是什么,网页设计网站建设流程由于本人对el-table-column有下拉输入选择的要求#xff0c;根据网上搜索的资料及本人优化#xff0c;推出我比较满意的方法#xff0c;供各位读者参考使用。
效果图 el-table-column写法
el-table-columnlabel货品编号aligncenterprop…由于本人对el-table-column有下拉输入选择的要求根据网上搜索的资料及本人优化推出我比较满意的方法供各位读者参考使用。
效果图 el-table-column写法
el-table-columnlabel货品编号aligncenterpropproductCodewidth180
template #defaultscopeel-selectv-modelscope.row.productCodeplaceholder请输入货品编号changechangeProduct(scope.$index, scope.row)filterableremote:remote-methodremoteProductCode:loadingloadingremote-show-suffixel-optionv-foritem in productOptions:keyitem.productId:labelitem.productCode:valueitem.productId/el-option/el-select/template
/el-table-columnchangeProduct写法
选择货品编号展示接口提供的信息
清空选择的数据获取选择的数据字段读取并展示对应的数据
// 选择货品
function changeProduct(index, row) {form.value.details[index] {productCode: null,productName: null,};let lists [];productOptions.value.forEach((item) {lists item;});form.value.details[index] {productCode: lists.productCode,productName: lists.productName,};form.value.details [...form.value.details];
}remoteProductCode写法
查询货品编号信息 原理if有指定内容查询则显示对应信息else显示全部 optionReset重置下拉框表单listProduct调用API接口
function remoteProductCode(query) {optionReset();if (query) {loading.value true;setTimeout(() {option.value.productCode query;listProduct(option.value).then((response) {productOptions.value response.rows;});loading.value false;productOptions.value list.value.filter((item) {return item.label.toLowerCase().includes(query.toLowerCase());});}, 200);} else {listProduct(option.value).then((response) {productOptions.value response.rows;});}
}源码分析
关于源码取自铠思进销存系统的ks-vue3/src/views/system/purchase/paymentDocumentProcessing.vue
