vue检索内容

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: "ArticleDrafts",
 4     data() {
 5       return {
 6         idValue: "",
 7         titleValue: "",
 8         statusValue: "",
 9         pId: '',
10         flag: false,
11         editVisible: false,
12         modelTitle: '新增/编辑',
13         form: {
14           name: '',
15           description: '',
16           code: ''
17         },
18         tableData: [
19           {
20             id_key: "1",
21             id: 1,
22             title_key: "卡卡罗特",
23             title: '卡卡罗特在中国发表看法',
24             lang: '英文',
25             channel: '民生',
26             hot: '否',
27             site: '成都',
28             status_key: "已驳回",
29             status: "已驳回",
30             remark: "admin"
31           },
32           {
33             id_key: "2",
34             id: 2,
35             title_key: "小强",
36             title: '小强在中国发表看法普朗特在中国发表看',
37             lang: '英文',
38             channel: '民生',
39             hot: '否',
40             site: '成都',
41             status_key: "已上线",
42             status: "已上线",
43             remark: "admin"
44           },
45           {
46             id_key: "3",
47             id: 3,
48             title_key: "张飞",
49             title: '张飞在中国发表看法',
50             lang: '英文',
51             channel: '民生',
52             hot: '否',
53             site: '成都',
54             status_key: "待审核",
55             status: "待审核",
56             remark: "admin"
57           }
58         ],
59       }
60     },
61     computed: {
62       items: function () {
63         var _search = this.idValue;
64         if (_search) {
65           return this.tableData.filter(function (product) {
66             return Object.keys(product).some(function (key) {
67               return String(product[key]).toLowerCase().indexOf(_search) > -1
68             })
69           })
70         }
71         return this.tableData;
72       }
73     },
74     methods: {
75       remove(id) {
76         this.tableData.splice(this.tableData.findIndex(item => item.id === id), 1);
77       },
78       // getInfo() {
79       //   axios.get('/api/article_drafts', {
80       //     params: {
81       //       id: this.$route.params.id
82       //     }
83       //   }).then(this.getDataSucc)
84       // },
85       // getDataSucc(res) {
86       //   res = res.data;
87       //   if (res.ret && res.data) {
88       //     const data = res.data;
89       //     this.idValue = data.idValue;
90       //     this.tableData = data.list;
91       //   }
92       // }
93     },
94     // mounted() {
95     //   this.getInfo()
96     // }
97   }
98 </script>

 

转载于:https://www.cnblogs.com/ronle/p/10831302.html