el-table行编辑 - 技术栈

需求：单点行编辑并且请求接口更新数据，表格中某几个字段是下拉框取值的，剩下的是文本域；展示的时候需要区分下拉框编码还是中文

故障模式这个展示的是fault_mode编码,但要显示的文字fault_mode_chn 这点需要注意

html 复制代码

        <el-table
          ref="table"
          :data="tableDataList"
          :header-cell-style="{ background: '#F5F7FA', height: '30px' }"
          style="width: 100%; margin: 0 auto"
          height="100%"
          align="center"
          row-key="id"
          stripe
          border
          :row-class-name="tableRowClassName"
          @cell-click="tabClick"
        >
          <!--
          @select="handleSelectRow"
          @select-all="handleSelectAllRow"
          @row-click="handleRowClick"
          @current-change="handleRowCurrent"
        -->
          <el-table-column align="center" label="操作" min-width="60" fixed="left">
            <template slot-scope="scope">
              <div>
                <a class="mc" title="修改" @click="handleAddMod('MOD', scope.row)"><em class="el-icon-edit" /></a>
                <span class="spaces" style="margin: -2px 2px">|</span>
                <a class="mc" title="删除" @click="handleDel(scope.row)"><em slot="reference" class="el-icon-delete mc" style="cursor: pointer" /></a>
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column type="selection" width="40" fixed /> -->
          <el-table-column
            v-for="(item, index) in viewColumns"
            :key="index"
            :fixed="item.fixed"
            :prop="item.prop"
            :align="item.align"
            :label="item.label"
            :min-width="item.width"
            :show-overflow-tooltip="true"
          >
            <!-- 行要能编辑  数据都能改 -->
            <template slot-scope="scope">
              <!-- MQS项和重要项目下拉框都是一个值 -->
              <span v-if="scope.row.index === tabClickIndex && tabLabel == item.label && tabClickLabel == '2'">
                <el-select v-model="scope.row[item.prop]" size="small" style="width: 100%" @change="handleChange($event, scope.row)">
                  <el-option v-for="(and, ind) in mqsItemOption" :key="ind" :label="and.text" :value="and.text" />
                </el-select>
              </span>
              <!-- 故障模式的 -->
              <span v-else-if="scope.row.index === tabClickIndex && tabLabel == item.label && tabClickLabel == '4'">
                <el-select v-model="scope.row[item.prop]" v-focus size="small" style="width: 100%" @change="handleChange($event, scope.row)">
                  <el-option v-for="and in faultModeOptions" :key="and.id" :label="and.text" :value="and.id" />
                </el-select>
              </span>
              <!-- 剩下的 都是文本域输入 -->
              <span v-else-if="scope.row.index === tabClickIndex && tabLabel == item.label && tabClickLabel == '1'">
                <el-input
                  v-model="scope.row[item.prop]"
                  v-focus
                  type="textarea"
                  :row="4"
                  class="fixed-height-textarea"
                  @change="handleChange($event, scope.row)"
                />
              </span>
              <span v-else v-html="intFormatter(scope.row[item.prop], item.prop)" />
            </template>
          </el-table-column>
          <!-- 有修改删除功能 -->
        </el-table>

javascript 复制代码

    tabClick(row, column, cell, event) {
      if (this.viewColumns.some((ele) => ele.label == column.label)) {
        this.tabClickIndex = row.index
      }
      if (column.label == 'MQS' || column.label == '重要项目') {
        this.tabClickLabel = '2'
      } else if (column.label == '故障模式') {
        this.tabClickLabel = '4'
      } else {
        this.tabClickLabel = '1'
      }
      this.tabLabel = column.label
    },
    tableRowClassName({ row, rowIndex }) {
      // 把每一行的索引放进row
      row.index = rowIndex
    },
    intFormatter(data, item) {
      // 重要项、mqs项和故障模式三个是下拉框
      if (item == 'fault_mode') {
        const text = this.faultModeOptions.filter(item => item.id === data)[0]?.text
        return text || ''
      } else {
        return data
      }
    },
    handleChange(val, row) {
      row.fault_mode_chn = this.faultModeOptions.filter(item => item.id === row.fault_mode)[0]?.text
      updItem(row).then(res => {
        if (res.result == '1') {
          this.$message.success('修改管理项成功')
          this.tabClickIndex = ''
          this.tabClickLabel = ''
        }
      })
    }

关于行编辑，可以参考elementui官网提供的方法