Vue+element UI 可编辑表格_vue可编辑表格组件

前端开发过程中，我们都会尽量避免多层弹窗的嵌套，最多两层弹窗嵌套。这么做的原因是为了方便管理代码和防止多层嵌套弹窗造成bug。但是有时候，内层的弹窗可能展示了一个表格，并且需要操作表格中的数据，这个时候我们只能自己DIY一个表格，取代弹窗处理的方法。

1，实现效果和逻辑

效果：表格展示数据，并且表格可以编辑数据（增、删、改）。

逻辑：实现可编辑表格的主要思想：使用table创立一个表格，正常展示数据，需要操作某一行数据时，根据行数据的ID作为标志，将该行HTML换成编辑框或者其他form组件。

2，效果图

 2，代码

HTML：

<!--
*
*checkedList：table表格行数据列表
*customCurrentId：编辑某行时，编辑行ID
*item.id !== customCurrentId：控制该行显示HTML内容，不同时显示文本，相同是显示编辑状态
*@click="addOtherForm"：新增行数据
*
-->
<table border="1" cellspacing="0" cellpadding="0" class="sinorock-table">
  <tr class="bg-style">
    <td class="table-label" style="width: 8%;">序号</td>
    <td class="table-label" style="width: 20%;">节点名称</td>
    <td class="table-label" style="width: 24%;">验收人</td>
    <td class="table-label" style="width: 20%;">人员信息</td>
    <td class="table-label" style="width: 18%;">方式</td>
    <td class="table-label" style="width: 10%;">操作</td>
  </tr>
  <tr v-for="(item,index) in checkedList" :key="item.id + index" class="bg-style">
      <template v-if="item.id !== customCurrentId">
        <td style="width: 8%;">{{ index+1 }}</td>
        <td style="width: 20%;">{{ item.name }}</td>
        <td style="width: 24%;">
          <el-radio v-model="item.type" :label="0" disabled>全部人员</el-radio>
          <el-radio v-model="item.type" :label="1" disabled>指定人员</el-radio>
        </td>
        <td style="width: 20%;" v-if="item.type === 1">{{ item.accepterName }}</td>
        <td style="width: 20%;" v-if="item.type === 0">全部</td>
        <td style="width: 18%;">
          <el-radio v-model="item.way" :label="0" disabled>会签</el-radio>
          <el-radio v-model="item.way" :label="1" disabled>或签</el-radio>
        </td>
        <td style="width: 10%;">
          <div class="explain-btn">
            <el-button type="text" icon="el-icon-edit" style="color:#39A1FF;" @click="customEditHandle(item)"></el-button>
            <el-button type="text" icon="el-icon-delete" style="color:#FD7474;" @click="customDeleteHandle(item)"></el-button>
          </div>
        </td>
      </template>
      <template v-else>
        <td style="width: 8%;">{{ index+1 }}</td>
        <td style="width: 20%;">
          <el-input type="text" size="mini" placeholder="请输入字段名" v-model="customCurrentObj.name" maxlength="10" clearable></el-input>
        </td>
        <td style="width: 24%;">
          <el-radio v-model="customCurrentObj.type" :label="0" @change="typeChangeHandle">全部人员</el-radio>
          <el-radio v-model="customCurrentObj.type" :label="1">指定人员</el-radio>
        </td>
        <td style="width: 20%;" v-if="customCurrentObj.type === 1">
          <el-input 
            placeholder="请选择" 
            size="mini"
            v-model="customCurrentObj.accepterName" 
            @focus="selectShow()"
            @clear="clearHandle()"
            clearable>
          </el-input>
        </td>
        <td style="width: 20%;" v-if="customCurrentObj.type === 0">全部</td>
        <td style="width: 18%;">
          <el-radio v-model="customCurrentObj.way" :label="0" :disabled="customCurrentObj.type === 0">会签</el-radio>
          <el-radio v-model="customCurrentObj.way" :label="1" :disabled="customCurrentObj.type === 0">或签</el-radio>
        </td>
        <td style="width: 10%;">
          <el-button type="text" icon="el-icon-circle-check" style="color:#39A1FF;" @click="customCheckOK(item)"></el-button>
          <el-button type="text" icon="el-icon-circle-close" @click="customCheckcancel(item)"></el-button>
        </td>
      </template>
  </tr>
  <tr class="bg-style">
    <td style="width: 8%;border: 0;"></td>
    <td style="width: 20%;border: 0;"></td>
    <td style="width: 24%;border: 0;text-align: right;">
      <div class="add-check-custom" @click="addOtherForm">
        <i class="el-icon-circle-plus-outline" style="color: #39A1FF;"></i>
        <span>添加验收节点</span>
      </div>
    </td>
    <td style="width: 20%;border: 0;"></td>
    <td style="width: 18%;border: 0;"></td>
    <td style="width: 10%;border: 0;"></td>
  </tr>
</table>

JavaScript：

<script>
    export default {
        data() {
            return {
                checkedList: [], // 验收节点列表
                customCurrentId: '', // 验收节点编辑时节点ID
                customCurrentObj: {}, // 验收节点编辑时节点数据
            }
        },
        methods: {
            // 新增验收节点
            addOtherForm(){
              let num = new Date().getTime()
              this.checkedList.push({name:'', type:0, accepter:'', accepterName:'', accepterList: [], way:1, id: 'addNew'+num })
              this.customCurrentId = 'addNew'+num
              this.customEditHandle(this.checkedList[this.checkedList.length-1])
            },
            // 删除验收节点
            customDeleteHandle(item) {
              this.checkedList = this.checkedList.filter((ele) => {
                return ele.id !== item.id
              })
              // 至少保留一条验收节点
              if(this.checkedList && this.checkedList.length === 0) {
                this.$message({
                  message: '请至少保留一条验收节点！',
                  type: 'error',
                  duration: 1000,
                  onClose: () => {
                    this.addOtherForm()
                  }
                })
              }
            },
            // 编辑验收节点
            customEditHandle(data){
                this.customCurrentId = data.id
                try {
                  this.customCurrentObj = JSON.parse(JSON.stringify(data))
                } catch (error) {
          
                }
            },
            // 修改确认验收节点
            customCheckOK(data){
              // 验收节点，填写完整的校验
              let columsEntityFlag = false
              let checkedPersonFlag = false
              if(this.customCurrentObj.type === 0) {
                checkedPersonFlag = false
              }else if(this.customCurrentObj.type === 1 && this.customCurrentObj.accepter === '') {
                checkedPersonFlag = true
              }
              if(!this.customCurrentObj.name || checkedPersonFlag) {
                columsEntityFlag = true
              }
              if(columsEntityFlag) {
                this.$message({
                  message: '请将您添加的验收节点填写完整！',
                  type: 'error',
                })
                return false
              }
              this.checkedList.forEach((item, index) => {
                if(item.id === this.customCurrentId) {
                  try {
                    this.checkedList[index] = JSON.parse(JSON.stringify(this.customCurrentObj))
                  } catch (error) {
            
                  }
                }
              })
              this.$message({
                message: '修改成功',
                type: 'success',
                duration: 1000,
                onClose: () => {
                  this.customCurrentId = ''
                }
              });
            },
            // 取消修改验收节点
            customCheckcancel(){
              let columsEntityFlag = false
              let checkedPersonFlag = false
              if(this.customCurrentObj.type === 0) {
                checkedPersonFlag = false
              }else if(this.customCurrentObj.type === 1 && this.customCurrentObj.accepter === '') {
                checkedPersonFlag = true
              }
              if(!this.customCurrentObj.name || checkedPersonFlag) {
                columsEntityFlag = true
              }
              if(columsEntityFlag) {
                this.$message({
                  message: '请将验收节点填写完整！',
                  type: 'error',
                })
                return false
              }
                this.customCurrentId = ''
            },
        }
    }
</script>

可编辑表格功能就记录到此了，有需要的小伙伴拿去用，希望对你们有所帮助。

这个方法实现可能比较low，谁有更好的方法请多多指导。

拜了个拜，迪迦。。。