zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    16.什么是面向对象编程?
    15.运动
    14.this指向和ES6常用内容
    13.正则表达式
    12.事件模型
    11.event事件对象
    10.BOM
    9.DOM
    拓扑排序学习(复习)笔记
    [Luogu] P1987 摇钱树
  • 原文地址:https://www.cnblogs.com/ronle/p/10831302.html
Copyright © 2011-2022 走看看