el-table 高度灵活的表格

目录

需求：

 增加删除行

增加删除列

点击单元格给特有的样式

编辑/清空单元格

注意点：

---

需求：

1、自由添加删除行和列

2、编辑单元格

              <div class="element-tle">
                <div class="element-btn">
                  <el-button type="primary" plain @click="handleAddColumn">添加列</el-button>
                  <el-button type="primary" plain @click="handleAddRow">添加行</el-button>
                  <el-button type="primary" plain @click="handleEditCell">编辑</el-button>
                  <el-button type="primary" plain @click="handleDelCell">清除</el-button>
                </div>
              </div>
              <el-table
                ref="tableMesRef"
                border
                :show-header="false"
                class="result-list"
                :data="mageTabDetail.list"
                :cell-class-name="insertIndex"
                @cell-click="getTabCellClick"
              >
                <el-table-column v-for="item in mageTabDetail.columnArr" :key="item.propStr" :prop="item.propStr" align="center">
                  <template slot-scope="scope">
                    <div v-if="scope.row[item.propStr] !== 'null'">{{ scope.row[item.propStr] }}</div>
                    <el-button
                      v-else
                      type="text"
                      style="color: #f56c6c"
                      :disabled="columnLength < 4"
                      @click="delColumn(item.propStr)"
                    >删除列</el-button>
                  </template>
                </el-table-column>
                <el-table-column align="center">
                  <template slot-scope="scope">
                    <el-button
                      v-if="mageTabDetail.list.length !== (scope.$index + 1)"
                      style="color: #f56c6c"
                      type="text"
                      :disabled="mageTabDetail.list.length < 4"
                      @click.stop="handleDeletetRow(scope.row, scope.$index)"
                    >删除行</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-dialog :title="dialog.title" :visible.sync="dialog.mageTabVisible" width="30%" class="add-config">
                  <el-form ref="mageTabForm" :model="mageTabForm" :rules="mageTabRules" label-width="100px">

                    <el-form-item v-if="mageTabForm.fieldType == 1" label="选择变量" prop="field">
                      <el-cascader
                        ref="dataSourceRef"
                           v-model="mageTabForm.variableName"
                           :options="fieldTabSelect"
                           :props="propsObj1"
                            placeholder="请选择变量"
                            filterable
                            clearable
                            @change="handleFieldChange"
                            @expand-change="expandChange"
                      ></el-cascader>
                    </el-form-item>
                 </el-form>
                 <span slot="footer" class="dialog-footer">
                    <el-button @click="dialog.mageTabVisible = false">取 消</el-button>
                    <el-button type="primary" @click="handleMageTabConfirm">确 定</el-button>
                  </span>
    </el-dialog>

 增加删除行

    //添加行
    handleAddRow() {
      this.mageTabDetail.messageFields.push(this.mageTabDetail.messageFields[0])
      // 获取到最新的一个row
      const row = this.mageTabDetail.list[0]
      // 得到一个新row row中所有属性值value都为''
      if (row) {
        const newRow = {}
        for (const key in row) {
          newRow[key] = ''
        }
        // 将newRow插入到数组的倒数第二项，因为最后一项是操作按钮，不可输入，所以使用splice而不是push
        this.mageTabDetail.list.splice(this.mageTabDetail.list.length - 1, 0, newRow)
      }
    },
    // 删除行
    handleDeletetRow(row, index) {
      // this.dialog.mageTabVisible = false
      this.mageTabDetail.list.splice(index, 1)
      this.mageTabDetail.messageFields.splice(index, 1)
    },

增加删除列

   // 添加列
    handleAddColumn() {
      const _this = this
      const columnObj = {}
      columnObj.propStr = 'item' + this.columnIndex
      columnObj.label = 'item' + this.columnIndex
      this.mageTabDetail.columnArr.push(columnObj)
      _this.columnIndex++
      // 对表格绑定的list数组中每一个对象添加对应的属性
      _this.mageTabDetail.list.forEach((item, index) => {
        if (index < (this.mageTabDetail.list.length - 1)) {
          _this.$set(item, columnObj.propStr, '') // 对data上没有到属性需要用this.$set讲属性变为响应式
        } else {
          // 给删除列提供标识，如果value值为null则为操作按钮
          _this.$set(item, columnObj.propStr, 'null')
          _this.mageTabDetail.list[index].item0 = 'null'
          _this.mageTabDetail.list[index].item1 = 'null'
          _this.mageTabDetail.list[index].item2 = 'null'
        }
      })
      this.mageTabDetail.messageFields.forEach(item => {
        item.push(this.mageTabForm)
      })
    },
    // 删除列
    delColumn(property) {
      // 找到要删除的列prop所对饮的index
      const delIndex = this.mageTabDetail.columnArr.findIndex(item => item.propStr === property)
      // 删除messageFields每一个数组中对应的对象
      this.mageTabDetail.messageFields.forEach(item => {
        item.splice(delIndex, 1)
      })
      const _this = this
      // 删除表格数据对象对应的属性
      _this.mageTabDetail.list.forEach((item, index) => {
        _this.$delete(item, property)
      })
      // 删除表头对应的属性
      _this.mageTabDetail.columnArr.forEach((item, index) => {
        if (item.propStr === property) _this.mageTabDetail.columnArr.splice(index, 1)
      })
    },

点击单元格给特有的样式

注意：由于不能从cell-click的回调函数参数中直接获取到对应的rowIndex和columnIndex，所以使用cell-class-name的回调函数给对应row添加行和列index

    // 给每个单元格添加所在行和列index
    insertIndex ({ row, column, rowIndex, columnIndex }) {
      // 添加行index
      row.index = rowIndex
      // 添加列index
      column.index = columnIndex
    },
    // 报文组成-表格添加字段
    getTabCellClick(row, column, cell, event) {
      if (row.index === this.mageTabDetail.list.length - 1) return
      // 清除选中单元格背景色
      if (this.cell) this.cell.style.backgroundColor = 'white'
      // 给单元格设置背景色
      cell.style.backgroundColor = '#f3f3f3'
      this.cell = cell
      this.tableMesRow = row.index
      this.tableMesColumnIndex = column.index
      this.tableMesColumn = column['property']
    },

编辑/清空单元格

    // 编辑/新增单元格信息
    handleEditCell() {
      this.dialog.title = '添加Table字段'
      this.dialog.mageTabVisible = true
      this.dialog.type = 0
      const { messageFields } = this.mageTabDetail
      // isEdit 判断是新增还是修改，为true则修改，为false则新增
      const isEdit = messageFields[this.tableMesRow][this.tableMesColumnIndex].variableName || messageFields[this.tableMesRow][this.tableMesColumnIndex].content
      if (isEdit) {
        this.mageTabForm = this.mageTabDetail.messageFields[this.tableMesRow][this.tableMesColumnIndex]
      } else {
        this.mageTabForm = {
          fieldType: 1,
          fieldContent: '',
          content: '',
          digit: '',
          fieldLength: '',
          invalidCharacter: '',
          configType: '',
          itemName: '',
          variableName: '',
          field: ''
        }
      }
    },
    // 清空单元格信息
    handleDelCell() {
      this.$refs['tableMesRef'].tableData[this.tableMesRow][this.tableMesColumn] = ''
      this.mageTabDetail.messageFields[this.tableMesRow][this.tableMesColumnIndex] = {}
    },
    // 添加字段-表格-确认
    handleMageTabConfirm() {
    this.$refs['tableMesRef'].tableData[this.tableMesRow][this.tableMesColumn] = this.mageTabForm.variableName ? this.mageTabForm.variableName : this.mageTabForm.content
}

注意点：

1、cell-click回调函数不能直接拿到行和列index

        解决方法：通过cell-class-name回调对row和column加上

2、点击单元格改变改变其背景色

        解决方法1：一开始使用cell-style的回调函数去做判断，返回对应的样式，开发过程中发现，第一：不清楚该回调函数的执行时机；第二：其他行都可以实现改变背景色的需求，唯独第一行不可以，第一行第一列可以使回调函数执行，但是背景色不会改变，排查中发现第一行本地存储的坐标是(0,0)，但是从回调函数中拿到的确没有(0,0)这个坐标，回调函数参数中rowIndex是从1开始的，所以判断失败，第一行的其他列点击不会让cell-style的回调函数执行，排查半天也没有发现问题出在哪儿，欢迎大佬指点。未解决

        解决方法2：通过cell-click回调函数中cell参数获取到对应的DOM，给其加上样式即可。详情看代码。

3、取消表格hover效果

        解决方法：:cell-style="{ background: '#fff'}"