最近遇到的需求，一个表格，需要行内编辑(其实最后还是改为了弹出框编辑)，前台使用的是 vue,ui 是 ant,ant....以前没用过，刚用了半个月，反正觉着不太好用，API 写的也不是太清楚。

然后就是行内编辑这个事儿，我觉得是数据字段比较少可以使用，如果数据字段比较多的话，会出现横向滚动条，在编辑的时候需要 来回拖动滚动条，客户使用上肯定会比较麻烦。

代码

<template >
  <a-layout id="components-layout-demo-top">
    <a-layout-content  style="overflow:auto;" >
      <a-spin :spinning="addOrUpdateLoading">
      <a-table  ref="table1"  :bordered="true" :columns="columns" :data-source="listdata"    class="whitetable" :pagination="false">
        <template slot="xuhaoslot" slot-scope="text, record, index">
          {{index+1}}
        </template>
        <template slot="nameslot" slot-scope="text, record, index">
          <div v-if="record.editable" >
            <a-input
              style="margin: -5px 0"
              :value="text"
              @change="(e) => handleChangeIndex(e.target.value, index, 'name','listdata')"/>
          </div>
          <div v-else>
            {{text}}
          </div>

        </template>
        <template slot="functionslot" slot-scope="text, record, index">
          <div v-if="record.editable" >
            <a-input
              style="margin: -5px 0"
              :value="text"
              @change="(e) => handleChangeIndex(e.target.value, index, 'function','listdata')"/>
          </div>
          <div v-else>
            {{text}}
          </div>
        </template>

        

        <template slot="operation" slot-scope="text, record, index">
          <div class="editable-row-operations">
            <span v-if="record.editable">
                <a @click="saveRowIndex(record)">保存</a>&nbsp;
              <a-popconfirm title="确定取消吗?" @confirm="() => cancelIndex(record)">
                <a>取消</a>
              </a-popconfirm>
            </span>
            <span v-else>
              <a @click="() => editRowIndex(record,index)">编辑</a>&nbsp;
              <a-popconfirm  title="确定删除吗?" @confirm="() => delRowIndex(index)">
                <a>删除</a>
              </a-popconfirm>
            </span>
          </div>
        </template>
      </a-table>
      </a-spin>
    </a-layout-content>

  </a-layout>
</template>

<script>

const columns =[{
  title:'序号',
  width:80,
  dataIndex: 'id',
  key: 'id',
  align:'center',
  scopedSlots:{customRender: 'xuhaoslot'}
},
  {
    title:'名称',
    width:150,
    dataIndex: 'name',
    key: 'name',
    scopedSlots:{customRender: 'nameslot'}
  },
  {
    title:'功能',
    width:150,
    dataIndex: 'function',
    key: 'function',
    scopedSlots:{customRender:'functionslot'}
  },
  
  {
    title:'修改',
    width:150,
    scopedSlots: {customRender: 'operation'}
  }
]


export default {
 
  data() {
    return {
      listdata:[],//列表行数据源
      columns, // 列表行 columns
      editingKey: '', //修改或新增标志
      addOrUpdateLoading:false,//加载中

    }
  },
  methods: {
   
    //修改行
    editRowIndex(record,key){
      //判断是否处于编辑状态
      if(this.editingKey !== null && this.editingKey !== ''){
        if(this.editingKey==='newkey'){
          this.$message.error('请先完成本次操作后在做添加')
        }else{
          this.$message.error('请先完成修改后在做添加')
        }
        return false
      }
      this.editingKey = key  //修改状态 防止 在修改时，点击新增

      
      //该行设置为 可编辑状态
      if (record) {
        record.editable = true
      }
    },
    //新增行
    addRow(){
      //判断是否处于编辑状态
      if(this.editingKey !== null && this.editingKey !== ''){
        if(this.editingKey==='newkey'){
          this.$message.error('请先完成本次操作后在做添加')
        }else{
          this.$message.error('请先完成修改后在做添加')
        }
        return false
      }
      this.editingKey = 'newkey'  //新增状态 防止 在新增时，点击修改
      this.listdata.push({
        id:'',
        name:'',
        functionTechnology:''
      })
    },
    //取消
    cancelIndex(record){
      //如果是新增，取消后需要删除 listdata 数组的 最后一个
      if(this.editingKey === 'newkey'){
        this.listdata.splice(this.listdata.length-1,1)
      }
      //重置 editable 数据
      record.editable=false
      this.editingKey=null
    },
    saveRowIndex(record){//保存或修改
      this.addOrUpdateLoading = true
     
      //调用后台方法 $axios ..... 
      // 调用成功之后根据自己的需求 看 要不要重新查询列表


    },
    //表格确定回调
    //value 修改后的数据
    //key 数据源数组的 第几个
    // column 修改的列名
    //data  修改的数据源 listdata
    handleChangeIndex(value, key, column,data) {

      
        const dataSource = this.listdata
        const target = dataSource[key]
        if (target) {
          target[column] = value
          this.listdata = dataSource
        }
      
    },
  },
  created() {
   
  }
}
</script>

代码逻辑比较简单，每一个字段都是使用的scopedslots这种方式，template 中主要是两个需要来回显示的代码，一个是纯文本，一个是input，通过v-if='editable' 来判断显示哪一个，当点击编辑时 input 框显示，然后可以输入信息，每个输入框都有change 事件，每次修改，都会把信息保存在 listdata中， 点击保存，调用后台方法，保存数据，至于要不要刷新表格，看你的具体业务