el-table中单元格自定义修改值组件封装

样式效果

---

使用

• template

参数说明：

1. rows： 一行的对象
2. tableInEdit： 全局控制当前只能编辑一个
3. prop： 要修改的字段名
4. submit ： 点击保存，执行更新操作

 <el-table-column
    prop="rank"
    label="序号"
    align="center">
        <template slot-scope="scope">
           <TableEditSingle 
            :rows.sync="scope.row"
            :tableInEdit.sync="tableInEdit"
            :prop="'rank'"
             @submit="switchChange"
           ></TableEditSingle>
         </template>
</el-table-column>

• js

<script>
// 导入ajax请求
import {updateProductChildPaletteDetail} from '@/api/product.js'
// 导入组件
import TableEditSingle from '@/components/tableEditSingle/index.vue'

export default {
data () {
    return {
      tableLoading: false,  // 全局loadding
      tableInEdit: false,   // 控制默认一次只能修改一个
    }
  },
methods: {
	async switchChange (prop, row) {
      // prop ：字段名字,  row: 该行的值
      this.tableLoading = true
      let results = await updateProductChildPaletteDetail({
        id: row.id,
        [prop]: row[prop]
      })
      if (results.data.code === 200 && results.data.msg === 'OK') {
        this.$message.success('操作成功！')
       // this.clickSearch(true)  重新获取数据， 传true代表当前页更新
      } else {
        this.$message.error(results.data.data)
      }
      this.tableLoading = false
    },
components: {
     TableEditSingle
    }
 }, 
}
</script>

TableEditSingle 组件

<template>
  <div>
    <div v-if="row[ prop +'_SetInChange_'] || false">
      <el-input
        v-model="tableInputState"
        clearable
        size="small"
        style="width: 200px"
      ></el-input>
      <el-button
        size="mini"
        class="ml5"
        @click="closeInputChange(prop , row)"
      >取消</el-button>
      <el-button
        size="mini"
        type="primary"
        @click="saveInputChange(prop, row)"
      >保存</el-button>
    </div>
    <div class="flexCenter" v-else>
      <span>{{row[prop]}}</span> 
      <i
        @click="openSingleEdit(prop, row)"
        class="el-icon-edit-outline editIcon"
      ></i>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      row: {},
      tableInputState: ""
    }
  },
  props: {
    rows: {
      type: Object
    },
    tableInEdit: {
      type: Boolean
    },
    prop: {
      type: String
    }
  },
  watch:{
    '$props.rows'(){
      this.row = { ...this.$props.rows }
    }
  },
  created () {
    this.row = { ...this.$props.rows }
  },
  methods: {
    // 打开编辑功能
    openSingleEdit (prop, row) {
      if (this.$props.tableInEdit) {
        this.$message.warning("请先完成当前编辑操作！")
        return
      } else {
        this.tableInputState = row[prop]
        this.$emit('update:tableInEdit', true)
        this.$set(row, `${prop}_SetInChange_`, true)
      }
    },
    // 点击取消
    closeInputChange (prop, row) {
      this.$emit('update:tableInEdit', false)
      this.$set(row, `${prop}_SetInChange_`, false)
    },
    // 点击保存
    saveInputChange (prop, row) {
      this.$emit('update:tableInEdit', false)
      this.$set(row, `${prop}_SetInChange_`, false)
      this.$set(row, prop, this.tableInputState)
      this.tableInputState = ""
      this.$emit('submit', prop, row)
    }
  },
}
</script>

<style scoped lang="less">
.flexCenter{
  display: flex;
  align-items: center;
  justify-content: center;
}
.editIcon {
  cursor: pointer;
  color: skyblue;
  margin-left: 10px;
  font-size: 17px;
}
</style>