vue+element表格＜el-select＞远程搜索

为了启用远程搜索，需要将filterable和remote设置为true，同时传入一个remote-method。remote-method为一个Function，它会在输入值发生变化时调用，参数为当前输入值。需要注意的是，如果el-option是通过v-for指令渲染出来的，此时需要为el-option添加key属性，且其值需具有唯一性，比如此例中的item.value。

 <el-table-columnprop="leftKey"align="center"label="农药登记证号"filterablewidth="145"><template slot-scope="scope"><el-selectv-model="scope.row.pdNo"filterableremoteclearable:disabled="true"reserve-keywordplaceholder="登记证号":remote-method="remoteMethod":loading="remoteLoading"><el-optionv-for="item in remoteOptions":key="item.value":label="item.label":value="item.value"></el-option></el-select></template></el-table-column>

data部分

  detail: {pdNo: '',},   remoteOptions: [], // 远程农户证号 for循环的返回数据的数组remoteLoading: false, // 是否正在从远程获取数据

方法

   remoteMethod (query) {try {clearTimeout(a)} catch (e) {}var a = setTimeout(() => {this.remoteLoading = true//获取农药证号数据if (query.length > 3) {this.$http({url: '/pesticide/register/registNoLike',method: 'get',params: {noLike: query}}).then(({ data }) => {if (data && data.code === 0) {this.remoteOptions = data.data.map(item => {return { value: `${item}`, label: `${item}` };});this.remoteLoading = false          }})}else {this.remoteLoading = falsethis.remoteOptions = [{label: "请至少填写四位",value: ""}];}}, 300);},

再举一个例子，在a框中，远程搜索后得到数据后，把a和b框到数据绑定在一起。

                  <el-table-columnprop="leftKey"align="center"label="农药通用名"width="145"><template slot-scope="scope"><el-select:disabled="disabled"v-model="scope.row.commonName"filterableremotereserve-keywordplaceholder="农药通用名":remote-method="remoteMethodName":loading="nameLoading"value-key="pdNo"@change="(val) => {commonSelectChange(val, scope.$index)}"><el-optionv-for="item in nameOptions":key="item.pdNo":label="item.commonName":value="item"><!--:value="item" 绑定整条数据item--></el-option></el-select></template></el-table-column>

data中

  detail: {pdNo: '',commonName: ''},remoteOptions: [], // 远程农户证号 for循环的返回数据的数组remoteLoading: false, // 是否正在从远程获取数据nameOptions: [],nameLoading: false,

事件

   remoteMethodName (query) {try {clearTimeout(a)} catch (e) {}var a = setTimeout(() => {this.nameLoading = true//获取农药证号数据if (query.length >= 2) {this.$http({url: '/pesticide/register/pesNameLike',method: 'get',params: {nameLike: query}}).then(({ data }) => {if (data && data.code === 0) {// console.log(data, 4556454);// this.list = data.data// const nameData = [  // 假数据，让后台返回这种格式//   {commonName:'敌敌畏',pdNo:'PD20142222'},//   {commonName:'敌敌畏2',pdNo:'PD20142223'},// ]this.nameOptions = data.data || [];this.nameLoading = false}})}else {this.nameLoading = falsethis.nameOptions = [{label: "请至少填写两位",value: ""}];}}, 300);},

  // 下拉框change事件commonSelectChange (value = {}, rowIndex) {const { pdNo = '', commonName = '' } = value;console.log(value, 5456465);this.remoteOptions = [pdNo];   // 给编号的数据赋值const details = (this.dataForm.details || []).map((item, index) => {// console.log(details, 888888);// item, index = Object.assign({}, (item, index));   // 拷贝对象，避免修改数据影响到数据源let newItem = JSON.parse(JSON.stringify(item))if (rowIndex === index) {  // 如果是当前行// if (row.rowIndex === index) {  // 如果是当前行item.commonName = commonName;item.pdNo = pdNo;  // 给编号下拉框赋值}return { ...item }});this.dataForm.details = details;console.log(details, 88888);},

是

vue+element表格＜el-select＞远程搜索相关推荐

VUE ELEMENT UI 清空select 下拉选项
VUE ELEMENT UI 清空select 下拉选项 1.select代码 <el-form ref="searchForm" :inline="true&qu ...
vue element 表格错位
vue element 表格发生错位对不齐的问题在做vue element 表格的时候,页面展示上发现列表对不齐 <style scoped> /deep/ .el-table th.g ...
vue element表格某一列内容过多，超出省略号显示
vue element表格某一列内容过多,超出省略号显示 iview表格某一列内容过多,超出省略号显示
VUE+ELEMENT:表格渲染导致的异常:You may have an infinite update loop in a component render function
场景: 做一个全文检索,检索到的记录显示到el-table表中,这本是一个简单的问题.后面要对检索的Key在记录中做高亮显示,遇到了这个异常. 百度一下,很吓人.可能有无限更新循环,这怎么行,听着这得 ...
element中组件el-autocomplete远程搜索之精确匹配和模糊匹配
在实际开发项目中总是会遇到很多难以预测的情况, 比如el-autocomplete的远程搜索时,经常会从服务器发起搜索,然后把对象带出的相关值赋给其他标签元素,一般模糊匹配没问题,但是精确匹配会存在一 ...
element 表格排序之远程排序去除默认排序
element表格提供了三种数据的排序方法: 升序排序 ascending 降序排序 descending 默认排序 null 如果是前端本地排序可设置 sort-doders 属性为 ['asce ...
antd vue select远程搜索下拉不更新数据
//重点: :default-active-first-option="false" :filter-option="false"<a-form-mode ...
element ui select 远程搜索选中之后清空输入框
第一步: 第二步:
Vue+Element表格动态列+表格分页
LayUI表格动态列及分页LayUI+JavaScript表格动态列+表格分页效果如图: 代码: 引用JQuery,Vue,Element等文件,换成自己的路径 <!DOCTYPE html& ...

vue+element表格＜el-select＞远程搜索

vue+element表格＜el-select＞远程搜索相关推荐

最新文章

热门文章

vue+element表格 ＜el-select＞远程搜索

vue+element表格 ＜el-select＞远程搜索相关推荐

最新文章

热门文章

vue+element表格＜el-select＞远程搜索

vue+element表格＜el-select＞远程搜索相关推荐