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