for 循环 array[{},{}]数据
使用iview 组件的表格
1.表格
<Input size="large" placeholder="请输入INS名" style="width: 210px" v-model="search"/>
<Table
highlight-row
border
ref="currentRowTable"
:columns="question.columns"
:data="computed_question_list"
></Table>
2.数据
question: {
columns: [
{
type: "index",
width: 60,
title: "序号",
align: "center"
},
{
title: "INS名",
key: "name"
},
{
title: "国家",
key: "country"
},
{
title: "类别",
key: "type"
},
{
title: "美瞳名称",
key: "imgName"
},
{
title: "秀图日期",
key: "imgDate"
},
{
title: "操作",
key: "action",
width: 100,
align: "center",
render: (h, params) => {
return h(
"Button",
{
props: {
type: "error",
size: "small"
},
on: {
click: () => {
this.remove5(params.index);
}
}
},
"取消提醒"
);
}
}
],
data: [
{
name: "John Brown",
country: "中国",
type: "红橙黄绿",
imgName: "翠峰眼妆",
imgDate: "2019-10-03"
},
{
name: "Brown",
country: "中国",
type: "红橙黄绿",
imgName: "翠峰眼妆",
imgDate: "2019-10-03"
}
]
},
重点数据过滤
image.png
3.原始数据的过滤
computed: {
computed_question_list() {
return this.question.data.filter(item => {
return item.name.toLowerCase().search(this.search) != -1;
});
}
},
this.search就是你在input里面进行搜索的内容，需要在data里面去定义一个search，与input进行数据双向绑定。
这里用到了3个东西，
1：computed：{function}
2：filter（function）
filter()过滤后生成一个新的数组
3：search（“value”）！= -1
search("要检索的内容")、indexOf("要检索的内容")，要检索的内容如果存在，返回在检索的对象中的索引位置，从0开始
如果要检索的内容不存在于检索的对象中，返回值就是-1
stringObject.indexOf("要检索的内容") 跟-1进行比较，判断要检索的内容存在与否
