vue实现表格的添加，删除，修改，搜索。使用了element-ui

继上一篇文章，加了新需求，要求有搜索功能。

上一篇点击查看：vue实现表格的添加，删除，修改，使用了element-ui

• 有兴趣的可以复制看看，依然是vue-cli3脚手架。有时间详述。

<template>
 <div class = "width_100 height_100" style="padding:50px 20px">
   <div class = "width_100 height_80">
      <el-row>
              <el-input
                v-model="search"
                size="mini"
                placeholder="输入关键字搜索"/>
        <el-col :span="24">
          <el-table size="mini" :data="tables" border style="width: 100%" highlight-current-row>
            <el-table-column type="index"></el-table-column>
            <el-table-column v-for="(item,index) in master_user.columns" :label="item.label" :prop="item.prop" :width="item.width" :key = "index">
              <template slot-scope="scope">
                <span v-if="scope.row.isSet">
                  <el-input size="mini" placeholder="请输入内容" v-model="master_user.sel[item.prop]">
                  </el-input>
                </span>
                <span v-else>{{scope.row[item.prop]}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="">
              <template slot-scope="scope">
                <span v-if="scope.row.isSet" class="el-tag el-tag--success el-tag--small" style="cursor: pointer;" @click.stop="saveRow(scope.row,scope.$index)">
                  保存
                </span>
                <span v-else class="el-tag el-tag--primary el-tag--small" style="cursor: pointer;" @click="editRow(scope.row,scope.$index)">
                  编辑
                </span>
                <span class="el-tag el-tag--danger el-tag--small" style="cursor: pointer;" @click="deleteRow(scope.$index,master_user.data)">
                  删除
                </span>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="24">
          <div class="el-table-add-row" style="width: 99.2%;" @click="add()"><span>+ 添加</span></div>
        </el-col>
      </el-row>
      <span style="color:#fff">{{master_user.data}}</span>
   </div>
 </div>
</template>

<script>
 export default {
   search: '',
   name: '',
   data() {
     return {
       search:"",
       master_user: {
         sel: null, //选中行   
         columns: [{
             prop: "deviceType",
             label: "设备类型",
             width: 120
           },
           {
             prop: "parentCode",
             label: "父设备编码",
             width: 150
           },
           {
             prop: "parentName",
             label: "父设备名称",
             width: 120
           },
           {
             prop: "deviceName",
             label: "设备类别名称",
             width: 220
           },
           {
             prop: "locationName",
             label: "位置名称"
           },
           {
             prop: "managementName",
             label: "管理部门名称"
           },
           {
             prop: "usetName",
             label: "使用部门名称"
           },{
             prop:"specification",
             label:"规格"
           },{
             prop:"model",
             label:"型号"
           },{
             prop:"uspData",
             label:"投用日期"
           }, {
             prop:"originalValue",
             label:"原值"
           }
         ],
         data: [{ 
          "deviceType": "1", 
          "parentCode": "2", 
          "parentName": "3", 
          "deviceName": "4", 
          "locationName": "5", 
          "managementName": "6", 
          "usetName": "7", 
          "specification": "8", 
          "model": "9", 
          "uspData": "10", 
          "originalValue": "11",
          "isSet": false, } ],
       },
     }
   },
   methods: {
     add() {
       for (let i of this.master_user.data) {
         if (i.isSet) return this.$message.warning("请先保存当前编辑项");
       }
       let j = {  
          "deviceType": "", 
          "parentCode": "", 
          "parentName": "", 
          "deviceName": "", 
          "locationName": "", 
          "managementName": "", 
          "usetName": "", 
          "specification": "", 
          "model": "", 
          "uspData": "", 
          "originalValue": "",
          "isSet": true, };
       this.master_user.data.push(j);
       this.master_user.sel = JSON.parse(JSON.stringify(j));
     },
     saveRow(row, index) { //保存
        var flag = true
        for (let i in this.master_user.sel){
          if(!this.master_user.sel[i]){
            flag = false
            console.log('123',false)
          }
        }
        if(flag){//判断是否全部填写
          let data = JSON.parse(JSON.stringify(this.master_user.sel));
          for (let k in data) row[k] = data[k];
          this.$message({
              type: 'success',
              message: "保存成功!"
          });
          row.isSet = false;//点击保存后该为false值，隐藏保存按钮，显示编辑按钮
        }else{
          this.$message({
            type:'warning',
            message: "请全部填写"
          })
        }

        

     },
     editRow(row) { //编辑
       for (let i of this.master_user.data) {
         if (i.isSet) return this.$message.warning("请先保存当前编辑项");
       }
       this.master_user.sel = row
       row.isSet = true//点击保存后该为false值，隐藏编辑按钮，显示保存按钮
     },
     deleteRow(index, rows) { //删除
        this.$message({
          type:'type',
          message:"删除成功!"
        })
       rows.splice(index, 1)
     }
   },
   computed: {
      // 模糊搜索
      tables () {
        const search = this.search
        if (search) {
          // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
          // 注意： filter() 不会对空数组进行检测。
          // 注意： filter() 不会改变原始数组。
          return this.master_user.data.filter(data => {
            // some() 方法用于检测数组中的元素是否满足指定条件;
            // some() 方法会依次执行数组的每个元素：
            // 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测;
            // 如果没有满足条件的元素，则返回false。
            // 注意： some() 不会对空数组进行检测。
            // 注意： some() 不会改变原始数组。
            return Object.keys(data).some(key => {
              // indexOf() 返回某个指定的字符在某个字符串中首次出现的位置，如果没有找到就返回-1；
              // 该方法对大小写敏感！所以之前需要toLowerCase()方法将所有查询到内容变为小写。
              return String(data[key]).toLowerCase().indexOf(search) > -1
            })
          })
        }
        return this.master_user.data
      }
    },
 }
</script>

<style>
 .el-table-add-row {
   margin-top: 10px;
   width: 100%;
   height: 34px;
   border: 1px dashed #c1c1cd;
   border-radius: 3px;
   cursor: pointer;
   justify-content: center;
   display: flex;
   line-height: 34px;
   color:#fff;
 }
 
</style>