效果图
代码
html
<el-table
:data="tableData"
stripe
style="width: 100%; margin-bottom: 30px"
size="mini"
height="480px"
>
<el-table-column prop="date" label="日期" min-width="180">
</el-table-column>
<el-table-column prop="video" label="视频" min-width="180">
</el-table-column>
<el-table-column prop="images" label="图片"> </el-table-column>
<el-table-column prop="download" label="下载">
<template slot-scope="scope">
<el-button
size="mini"
type="primary"
@click="download_erweima(scope.row)"
>生成二维码</el-button
>
</template>
</el-table-column>
</el-table>
data：这是模拟的，后台拿的数据也一样再弄一个变量赋值一份
//表格
tableData: [
{
date: "2016-05-01",
video: "A1.MPG",
images: "A1.ZIP",
},
{
date: "2016-05-02",
video: "A1.MPG",
images: "A1.ZIP",
},
{
date: "2016-05-03",
video: "A1.MPG",
images: "A1.ZIP",
},
{
date: "2016-05-04",
video: "A1.MPG",
images: "A1.ZIP",
},
{
date: "2016-05-05",
video: "A1.MPG",
images: "A1.ZIP",
},
{
date: "2016-05-01",
video: "A1.MPG",
images: "A1.ZIP",
},
{
date: "2016-05-02",
video: "A1.MPG",
images: "A1.ZIP",
},
{
date: "2016-05-03",
video: "A1.MPG",
images: "A1.ZIP",
},
{
date: "2016-05-04",
video: "A1.MPG",
images: "A1.ZIP",
},
{
date: "2016-05-05",
video: "A1.MPG",
images: "A1.ZIP",
},
],
tableDatas: [
{
date: "2016-05-01",
video: "A1.MPG",
images: "A1.ZIP",
},
{
date: "2016-05-02",
video: "A1.MPG",
images: "A1.ZIP",
},
{
date: "2016-05-03",
video: "A1.MPG",
images: "A1.ZIP",
},
{
date: "2016-05-04",
video: "A1.MPG",
images: "A1.ZIP",
},
{
date: "2016-05-05",
video: "A1.MPG",
images: "A1.ZIP",
},
{
date: "2016-05-01",
video: "A1.MPG",
images: "A1.ZIP",
},
{
date: "2016-05-02",
video: "A1.MPG",
images: "A1.ZIP",
},
{
date: "2016-05-03",
video: "A1.MPG",
images: "A1.ZIP",
},
{
date: "2016-05-04",
video: "A1.MPG",
images: "A1.ZIP",
},
{
date: "2016-05-05",
video: "A1.MPG",
images: "A1.ZIP",
},
],
//搜索框输入值
search_erweima: "",
methods：这个是方法
解释一下：search_erweima是搜索输入的值。然后判断是否为空，空就把备份数据赋值给tableData 以此达到让表格恢复原状的目的，如果不是空的就是有值，那就根据这个值filter筛选一下把条件为true的数据返回，includes方法是判断这个输入的值是否在数据中存在，如果有就返回true。这就搞定了。
inquire() {
let fuzzy = this.search_erweima;
if (fuzzy) {
this.tableData = this.tableDatas.filter((item) => {
return item.date.includes(fuzzy)
});
} else {
this.tableData = this.tableDatas;
}
},
如果你需要多个条件判断写法
像这样加个&&号然后改下就行了，同理如果你需要多个条件，但是只要满足一个就行那就换成 ||
inquire() {
let fuzzy = this.search_erweima;
if (fuzzy) {
this.tableData = this.tableDatas.filter((item) => {
return item.date.includes(fuzzy)&&item.age.includes(fuzzy)
});
} else {
this.tableData = this.tableDatas;
}
},