表格单元格输入框转换-其一

Element方法： cell-mouse-enter和cell-mouse-leave方法进行

复制代码

<el-table
    v-loading="tableLoading1"
    :data="tableData1"
    height="160px"
    @cell-mouse-enter="cellMouseEnter"
    @cell-mouse-leave="cellMouseLeave"
    style="width: 100%">
	<el-table-column prop="remark" label="备注" min-width="80" align="center">
        <template slot-scope="scope">
            <el-input v-if="showInputs[scope.$index]" size="mini" v-model="scope.row.remark"></el-input>
                <div style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" v-else>
                    {{ scope.row.remark }}
                  </div>
        </template>
    </el-table-column>

此处需要在data中声明一个变量：showInputs:[] 这用来存储哪行需要变成输入框

在页面进行渲染的时候，我们要先把showInputs弄成一个跟表格数据一样长度的数组，并且赋值为false

复制代码

mounted() { this.showInputs = new Array(this.tableData1.length).fill(false) }

之后就是对cellMouseEnter 和 cellMouseLeave 方法进行编写

复制代码

    // hover 进入时会触发该事件
      cellMouseEnter(row, column) {
        if(column.label == '备注') {
          this.$set(this.showInputs, row.num-1, true);
        }
      },
      // hover 退出时会触发该事件
      cellMouseLeave(row, column) {
        if(column.label == '备注') {
          this.$set(this.showInputs, row.num-1, false);
        }
      },

这是简单的编写。但是在实际开发过程中，还有别的需求：

例如：1. 当一行不是输入框，则是下拉框，那会遇到：当行变成下拉框的时候，我们鼠标进行选择的时候，行数据就立马又变成了数据。不是输入模式了。这个时候就必须借助css进行了调整了。

复制代码

<el-select 
    v-else-if="['等级'].includes(item.label)" 
    popper-class="selectPopper"
    @change="((val)=>{bugLevelChange(val, scope.$index)})" 
    v-model="scope.row['bugLevelCode']"
    placeholder="请选择">
        <el-option
            v-for="item in bugLevelOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
</el-select>

popper-class给下拉框赋值一个class 这个不能加scope。所以为了不影响别的下拉框样式，class一定要取一个独特的名字哟

css 复制代码

<style lang="less">
.selectPopper {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}
</style>

这样就可以避免我们鼠标进行选择的时候表格监测到进入别的单元格了。

但是表格仍会监测到我们的鼠标离开了单元格了。所以我们需要去掉这个单元格的监测。

css 复制代码

      // hover 退出时会触发该事件
      cellMouseLeave(row, column) {
        if(this.inpustList.includes(column.label)) {
          const index = this.tableData.findIndex(item=>item.id == row.id)
          if(!['等级'].includes(column.label)) {
            this.$set(this.showInputs, index, false);
          }
        }
      },

还有一个需求是：某个字段可以编辑，但是鼠标也可以点击，进行链接跳转。这样当我们鼠标进入到单元格的时候，单元格就会立刻变成了输入模式了。则就不能点击了。这个时候我们就对cellMouseEnter这个方法进行修改了。

html 复制代码

      // hover 进入时会触发该事件
      cellMouseEnter(row, column, cell, event) {
        if(this.inpustList.includes(column.label)&&column.label != '附件链接') {
          this.showInputs = []
          const index = this.tableData.findIndex(item=>item.id == row.id)
          this.rowObj = {...row}
          this.showInputs = this.showInputs.map(item=>item==true ? false : item)
          this.$set(this.showInputs, index, true);
        }
      },

最后总结：完成代码：

html 复制代码

    <el-table
    :data="tableData"
    border
    height="100%"
    @cell-mouse-enter="cellMouseEnter"
    @cell-mouse-leave="cellMouseLeave"
    v-loading="tableLoading"
    :row-style="tableRowStyle"
    :cell-style="tableCellStyle"
    style="width: 100%;">
    <el-table-column
      v-for="(item, index) of tableColumn"
      :align="item.align ? item.align : 'center'"
      :key="index"
      :prop="item.prop"
      :label="item.label"
      :min-width="item.minWidth"
      :width="item.width">
      <template slot-scope="scope">
        <template v-if="(inpustList.includes(item.label))">
          <template v-if="showInputs[scope.$index]">
            <el-input-number v-if="['问题个数','漏洞数量'].includes(item.label)" controls-position="right" size="mini" :min="1" v-model.number="scope.row[item.prop]"></el-input-number>
            <el-select 
              v-else-if="['等级'].includes(item.label)" 
              popper-class="selectPopper"
              @change="((val)=>{bugLevelChange(val, scope.$index)})" 
              v-model="scope.row['bugLevelCode']"
              placeholder="请选择">
              <el-option
                v-for="item in bugLevelOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-input v-else size="mini" v-model="scope.row[item.prop]"></el-input>
          </template>
          <div style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" v-else>
            <template v-if="item.prop != 'attachUrl'">{{ scope.row[item.prop] }}</template>
            <div style="cursor: pointer;"  v-else>
              <el-link type="primary" :href="scope.row[item.prop]" target="_blank">{{ scope.row[item.prop] }}</el-link>
            </div>
          </div>
        </template>
        <template v-else>
          <template v-if="item.prop != 'attachUrl'">{{ scope.row[item.prop] }}</template>
          <template v-else>
            <el-link style="cursor: pointer;" type="primary" :href="scope.row[item.prop]" target="_blank">{{ scope.row[item.prop] }}</el-link>
          </template>
        </template>
      </template>
    </el-table-column>
  </el-table>