vue項目el-table 實現表格行內可編輯功能

vue+element UI實現表格可編輯：

vue項目使用el-table 實現表格行內可編輯

<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="data"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column :label="$t('table.id')" width="95" align="center">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.key')" width="300" align="center">
        <template slot-scope="scope">
          <el-input v-if="scope.row.isSet" v-model="scope.row.key" />
          <span v-else>{{ scope.row.key }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.type')" align="center">
        <template slot-scope="scope">
          <el-select v-if="scope.row.isSet" v-model="scope.row.type" :placeholder="$t('table.pleaseSelect')">
            <el-option value="num">num</el-option>
            <el-option value="color">color</el-option>
            <el-option value="boolean">boolean</el-option>
            <el-option value="other">other</el-option>
          </el-select>
          <span v-else>{{ scope.row.type }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.value')" align="center">
        <template slot-scope="scope">
          <el-input v-if="scope.row.isSet" v-model="scope.row.value" change="changeValueByType(scope.row)" />
          <span v-else>{{ scope.row.value }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.desc')" align="center">
        <template slot-scope="scope">
          <el-input v-if="scope.row.isSet" v-model="scope.row.desc" />
          <span v-else>{{ scope.row.desc }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.operate')" align="center" width="250">
        <template slot-scope="scope">
          <el-button v-if="!scope.row.edit" type="text" size="small" @click.native.prevent="handleEdit(scope.$index, scope.row)">{{ $t('table.edit') }}</el-button>
          <el-button v-if="scope.row.edit" type="text" size="small" @click.native.prevent="handleUpdate(scope.row)">{{ $t('table.save') }}</el-button>
          <el-button v-if="scope.row.edit" type="text" size="small" @click.native.prevent="handleCancel(scope.row)">{{ $t('table.cancel') }}</el-button>
          <el-button v-if="!scope.row.edit" type="text" size="small" @click.native.prevent="handleDelete(scope.$index, scope.row)">{{ $t('table.delete') }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="el-table-add-row" @click="handleAdd()">
      <span> + {{ $t('table.add') }}</span>
    </div>
  </div>
</template>

<script>
import { getAllConfig, updateConfig, deleteConfig, addConfig } from '@/api/system-config'
import { validColor, validNum } from '@/utils/validate'
export default {
  data() {
    return {
      listLoading: false,
      data: []
    }
  },
  created() {},
  mounted() {
    this.getSystemConfigList()
  },
  methods: {
    async getSystemConfigList() {
      this.data = await getAllConfig()
    },
    // 編輯
    handleEdit(index, row) {
      for (const i of this.data) {
        if (i.isSet) return this.$message.warning('請先保存當前編輯項')
      }
      row.edit = true
      row.isSet = true
    },
    // 取消
    handleCancel(row) {
      row.edit = false
      row.isSet = false
      this.getSystemConfigList()
    },
    // 保存
    // value驗證
    validBytype(row) {
      let valid = true
      if (row.key !== '' && row.type !== '' && row.value !== '') {
        if (row.type === 'color') {
          valid = validColor(row.value)
        } else if (row.type === 'num') {
          valid = validNum(row.value)
        } else if (row.type === 'boolean') {
          if (row.value === 'true' || row.value === 'false') {
            valid = true
          } else {
            valid = false
          }
        }
        if (!valid) {
          row.value = ''
          this.$message({
            type: 'warning',
            message: 'value格式錯誤'
          })
        }
      } else {
        valid = false
        this.$message({
          type: 'warning',
          message: 'key、value、type不能爲空'
        })
      }
      return valid
    },
    handleUpdate(row) {
      if (this.validBytype(row)) {
        row.isSet = false
        row.edit = false
        delete row.isSet
        delete row.edit
        if (row.id === '' || row.id === undefined) {
          addConfig(row).then(() => {
            this.getSystemConfigList()
          })
        } else {
          updateConfig(row).then(() => {
            this.getSystemConfigList()
          })
        }
        this.$message({
          type: 'success',
          message: '保存成功'
        })
      }
    },
    // 刪除
    handleDelete(index, row) {
      this.$confirm('此操作將永久刪除該文件, 是否繼續?', '提示', {
        confirmButtonText: '確定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        deleteConfig(row.id)
        this.data.splice(index, 1)
        this.$message({
          type: 'success',
          message: '刪除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消刪除'
        })
      })
    },
    // 添加
    handleAdd() {
      for (const i of this.data) {
        if (i.isSet) return this.$message.warning('請先保存當前編輯項')
      }
      const j = { 'key': '', 'type': '', 'value': '', 'desc': '', 'isSet': true, 'edit': true }
      this.data.push(j)
    }
  }
}
</script>
<style>
  .el-table-add-row{
    border: 1px dashed #0f6ab4;
    width: 100%;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
    margin-top: 5px;
  }
</style>

表單驗證：

/**
 * @param {string} str
 * @returns {Boolean}
 */
export function validColor(str) {
  return /^#[0-9a-fA-F]{6}$/.test(str)
}

/**
 * @param {string} str
 * @returns {Boolean}
 */
export function validNum(str) {
  return /^[0-9]+$/.test(str)
}