vue检索内容

普通版

    let arr = [
      {
        id: 1,
        name: 'a'
      },
      {
        id: 2,
        name: 'b'
      }
    ]

    let obj = arr.find(function(x) {
      return x.id === 1
    })
    console.log(obj.name)

html

1  <div class="a-content">
2         <span class="title">ID号：</span>
3         <el-input
4           size="small"
5           placeholder="请输入内容"
6           prefix-icon="el-icon-search"
7           v-model="idValue">
8         </el-input>
9 </div>
 1 <tr v-for="item in items" :key="item.id">
 2           <td><span>{{item.id}}</span></td>
 3           <td><span>{{item.title}}</span></td>
 4           <td><span>{{item.lang}}</span></td>
 5           <td><span>{{item.channel}}</span></td>
 6           <td><span>{{item.hot}}</span></td>
 7           <td><span>{{item.site}}</span></td>
 8           <td><span>{{item.status}}</span></td>
 9           <td><span>{{item.remark}}</span></td>
10           <td>
11             <el-button size="mini" type="danger" @click.stop="remove(item.id)">删除</el-button>
12           </td>
13 </tr>

js

 1 <script>
 2 export default {
 3   name: 'Home',
 4   data () {
 5     return {
 6       idValue: '',
 7       tableData: [
 8         {
 9           id_key: '1',
10           id: 1,
11           title_key: '卡卡罗特',
12           title: '卡卡罗特在中国发表看法',
13           lang: '英文',
14           channel: '民生',
15           hot: '否',
16           site: '成都',
17           status_key: '已驳回',
18           status: '已驳回',
19           remark: 'admin'
20         },
21         {
22           id_key: '2',
23           id: 2,
24           title_key: '小强',
25           title: '小强在中国发表看法普朗特在中国发表看',
26           lang: '英文',
27           channel: '民生',
28           hot: '否',
29           site: '成都',
30           status_key: '已上线',
31           status: '已上线',
32           remark: 'admin'
33         },
34         {
35           id_key: '3',
36           id: 3,
37           title_key: '张飞',
38           title: '张飞在中国发表看法',
39           lang: '英文',
40           channel: '民生',
41           hot: '否',
42           site: '成都',
43           status_key: '待审核',
44           status: '待审核',
45           remark: 'admin'
46         }
47       ]
48     }
49   },
50   computed: {
51     items: function () {
52       var _search = this.idValue;
53       if (_search) {
54         return this.tableData.filter(function (item) {
55           return Object.keys(item).some(function (key) {
56             return String(item[key]).toLowerCase().indexOf(_search) > -1
57           })
58         })
59       }
60       return this.tableData;
61     }
62   },
63   methods: {
64     remove (id) {
65       this.tableData.splice(this.tableData.findIndex(item => item.id === id), 1);
66     }
67   }
68 }
69 </script>
posted @ 2019-05-08 13:30  ronle  阅读(617)  评论(0)  编辑  收藏  举报