elementui笔记：el-table添加一行可输入的空行or删除一行记录

Posted 2022-08-07 安之ccy

继上篇文章的例子，改造一下
思路：
1.给“增加”按钮绑定点击事件，点击即增加可输入的一行空行
2.如果点击“删除”，就借助@row-click和event来删掉该行数据

效果：
1.点击“删除”按钮，把当前行数据删掉
2.点击“增加”按钮，新增一行，此处用push，所以空行加在最后面
3.输入数据，每个字段都输入时，校验通过（控制台没有录制进去，依然是有打印的）

代码：
html：

    <div id="app">
      <el-form class="base-form" ref="baseForm" :model="baseForm" :rules="rules" auto-complete="on">
        <el-table ref="table-input" class="table" highlight-current-row :data="baseForm.demoList" @row-click="selectItem">
          <el-table-column label="姓名" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-form-item :prop="'demoList.'+scope.$index+'.name'" :rules="rules.name" class="all">
                <el-input v-model="scope.row.name" placeholder="请输入" clearable @focus="$refs.baseForm.clearValidate(`demoList.$scope.$index.name`)"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="年龄" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-form-item :prop="'demoList.'+scope.$index+'.age'" :rules="rules.age" class="all">
                <el-input v-model="scope.row.age" placeholder="请输入" clearable @focus="$refs.baseForm.clearValidate(`demoList.$scope.$index.age`)"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="出生日期" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-form-item :prop="'demoList.'+scope.$index+'.birthday'" :rules="rules.birthday" class="all">
                <el-date-picker placeholder="请选择" v-model="scope.row.birthday" format="yyyy-MM-dd" clearable @focus="$refs.baseForm.clearValidate(`demoList.$scope.$index.birthday`)"></el-date-picker>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="详细地址" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-form-item :prop="'demoList.'+scope.$index+'.address'" :rules="rules.address" class="all">
                <el-input v-model="scope.row.address" placeholder="请输入" clearable @focus="$refs.baseForm.clearValidate(`demoList.$scope.$index.address`)"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="" label="操作">
            <template>
              <div class="flex-c-a">
                <span @click="addLine()" class="add-btn">增加</span>
                <span class="delete-btn">删除</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <div class="flex-c-a margin-top-10">
        <el-button @click="submit">提交</el-button>
      </div>
    </div>

data：

        data: 
              baseForm: 
                demoList: [
                
                  birthday: '2010-05-02',
                  name: '王小一',
                  age: 13,
                  address: '上海市普陀区金沙江路 1518 弄'
                  , 
                  birthday: '2011-05-04',
                  name: '王小二',
                  age: 12,
                  address: '上海市普陀区金沙江路 1517 弄'
                  , 
                  birthday: '2012-05-01',
                  name: '王小五',
                  age: 11,
                  address: '上海市普陀区金沙江路 1519 弄'
                  , 
                  birthday: '2013-05-03',
                  age: 10,
                  name: '王小六',
                  address: '上海市普陀区金沙江路 1516 弄'
                  
                ]
            ,
            index: 0,
            rules: 
              name: [
                
                  required: true,
                  message: "请输入姓名",
                  trigger: "blur"
                
              ],
              age: [
                 required: true, message: "请输入年龄", trigger: "blur" 
              ],
              birthday: [
                 required: true, message: "请选择出生日期", trigger: "change" 
              ],
              address: [
                 required: true, message: "请输入详细地址", trigger: "blur" 
              ],
            
        

method：

              // 选中某一行修改或移除
              selectItem(row, column, event) 
                this.selectedFundRow = row
                if (event.target.innerText == "删除") 
                  this.removeFundBtn(this.selectedFundRow)
                
              ,
              // 删除指定行
              removeFundBtn(params) 
                this.baseForm.demoList = this.baseForm.demoList.filter((ele) => 
                  var flag = false
                  // 如果不一致，则保留该行
                  for (const key in params) 
                    if (ele[key] != params[key]) 
                      flag = true
                      break
                    
                  
                  return flag
                )
                // 如果全部删除后没有可以点击的一行了，需要加一行空行
                if (!this.baseForm.demoList.length) 
                  this.addLine()
                
              ,
              // 增加一个空行, 用于录入或显示第一行
              addLine() 
                const newLine = 
                  name: "",
                  age: "",
                  birthday: "",
                  address: ""
                
                this.index++
                this.baseForm.demoList.push(newLine)
              ,
              // 提交
              submit() 
                this.$refs.baseForm.validate((valid) => 
                  if (valid) 
                    this.$confirm("您确定【提交】？", "提示", 
                      confirmButtonText: "确定",
                      cancelButtonText: "取消",
                      type: "warning"
                    ).then(() => 
                      console.log("校验通过")
                    )
                  
                )
              
            

使用的css：

  .all 
    width: 100%;
  
  .flex-c-a 
    display: flex;
    align-items: center;
    justify-content: space-around;
  
  .margin-top-10 
    margin-top: 10px;
  
  .base-form.el-form-item__content 
    margin-left: 0;
  
  .add-btn 
    color: #4077F4;
  
  .delete-btn 
    color: #f56c6c;
  

完成

另：
1.“增加”的按钮可以统一提出来，放在el-form的最前面，因为每个增加按钮效果都是一样的，只是增加一个空行，而且add是独立绑定一个事件的，所以不会影响功能
2.鼠标悬浮在日期选择器上面的时候，会有一个黑色的会话框一样的东西，如果不需要这个效果，把时间选择器所在的el-form-item的悬浮显示效果show-overflow-tooltip去掉即可

代码截图如下：

去掉日期这栏的悬浮显示效果前：

去掉之后的页面效果：