一、表格模糊查询
具体实现效果图如下：
具体代码如下：
:data="tables"这个tables绑定是的computed里的tables方法
<el-input v-model="search" placeholder="请输入搜索内容" style="margin-bottom:15px"></el-input>
<el-table :data="tables" border style="width: 100%" @row-dblclick="dbClickFn">
<el-table-column prop="goodsNoVer" label="税收分类编码" width="120"></el-table-column>
<el-table-column prop="productNr" label="商品编码"></el-table-column>
<el-table-column prop="productName" label="商品名称"></el-table-column>
</el-table>定义的变量tableData放的是从后端获取的动态数据
data() {
return {
search: "",
tableData: [],
};
},computed: {
tables() {
const search = this.search;
if (search) {
return this.tableData.filter((dataNews) => {
return Object.keys(dataNews).some((key) => {
return String(dataNews[key]).toLowerCase().indexOf(search) > -1;
});
});
}
return this.tableData;
},
},二、带输入建议输入框踩坑总结
我用的是官网激活即列出输入建议的那一种，静态数据直接可以使用官网的例子，我是调用后端接口遇到的一些问题
官网地址：点击跳转官网例子 具体实现效果图如下：
具体代码如下：
官方的例子只能用字段vlaue来查询，但是我需要的别的字段，例如我此处需要productName字段，
在html代码里 加这样一段代码就能实现
<template slot-scope="{ item }">
<div>{{ item.value=item.productName }}</div>
</template>不需要搜索标志的可以直接把el-button删掉（html代码），完整代码如下：
<el-autocomplete
class="input-with-select"
v-model="deData1.vehicleKind"
:fetch-suggestions=""
placeholder="请输入内容"
@select="handleSelect"
size="mini"
>
<template slot-scope="{ item }">
<div>{{ item.value=item.productName }}</div>
</template>
<el-button
slot="append"
icon="el-icon-search"
@click="showCommodityDialog"
class="chooseBtn"
></el-button>
</el-autocomplete>初始化数据，调用loadAll方法，在loadAll方法里赋动态值
mounted() {
this.loadAll();
},我不知道为什么直接赋值报不是数组这个错
于是我转换了一下
JSON.parse(JSON.stringify(数据)); 如果没有报这个错可以直接赋值this.commodities = res.data.data;
methods: {
loadAll() {
selectProductList().then((res) => {
if (res.data.code == 200) {
this.commodities = JSON.parse(JSON.stringify(res.data.data));
}
});
},
querySearchCom(queryString, cb) {
var commodities = this.commodities;
var results = queryString
? commodities.filter(this.createFilter(queryString))
: commodities;
// 调用 callback 返回建议列表的数据
cb(results);
},
createFilter(queryString) {
return (item) => {
return (
item.value.toLowerCase().indexOf(queryString.toLowerCase()) !==
-1
);
};
},
handleSelect(item) {
console.log(item);
},
}注意：官方的例子在筛选的时候的代码是
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0===0匹配的是内容的第一个字开始，我改成了 !==-1换成全局匹配，这样随意输入任意位置的内容都能查到
后续报错问题 数据 is not define：需求又给我增加了功能：点击输入框里的搜索按钮，跳出弹框，里面是动态数据，双击某一行将内容填入这个输入框
但是你会发现如果用上面那种处理value方法的方法，当第一次操作的时候，先双击填入内容，在点击一下输入框，就会报错，数据没定义，超时处理什么的
解决方法如下：
1、把之前在html中加入的代码删除
2、在querySearchCom方法里加这么一个循环，给动态数据新增一个value字段，将你需要联想筛选的字段赋值进去。
querySearchCom(queryString, cb) {
var commodities = this.commodities;
for (var i = 0; i < commodities.length; i++) {
commodities[i].value = commodities[i].productName;
}
var results = queryString
? commodities.filter(this.createFilter(queryString))
: commodities;
// 调用 callback 返回建议列表的数据
cb(results);
},
