table新增删除（当行新增，末尾新增）修改数据后增加颜色标识

<template>
  <a-card>
    <a-button class="editable-add-btn" @click="handleAdd" type="primary"> Add </a-button>
    <a-table bordered :data-source="dataSource" :columns="columns" size="small" :pagination="btmPagination"
          @change="btmPaginationFun">
      <template slot="name" slot-scope="text, record">
        <editable-cell :text="record['name']? record['name'].toString():''" :record="record" :itemName="'name'" @change="onCellChange(record.itemKey, 'name', $event)" />
      </template>
      <template slot="school" slot-scope="text, record">
        <editable-cell :text="record['school']? record['school'].toString():''" :record="record" :itemName="'school'" @change="onCellChange(record.itemKey, 'school', $event)" />
      </template>
      
      <template v-for="item in pushArr" :slot="item" slot-scope="text, record, index">
          <div :key="item">
              <editable-cell :text="record[item]? record[item].toString():''" :record="record" :itemName="item" @change="onCellChange(record.itemKey, item, $event)" />
          </div>
      </template>
      <template slot="operation" slot-scope="text, record">
        <a-popconfirm v-if="dataSource.length" title="Sure to delete?" @confirm="() => onDelete(record.itemKey)">
          <a-button type="danger" size="small" >
              删除
            </a-button>
        </a-popconfirm>
        <a-button type="primary" size="small" style="margin-left:8px" @click="handleChildrenAdd(record)">
            新增
          </a-button>
      </template>
    </a-table>
  </a-card>
</template>
<script>
const EditableCell = {
  template: `
      <div class="editable-cell">
        <div v-if="editable" class="editable-cell-input-wrapper">
          <a-input :value="value" @change="handleChange" @pressEnter="check" /><a-icon
            type="check"
            class="editable-cell-icon-check"
            @click="check"
          />
        </div>
        <div v-else class="editable-cell-text-wrapper">
          <span :style='{ color: getColorFun(record, itemName)}'>{{ value || ' ' }}</span>
          <a-icon type="edit" class="editable-cell-icon" @click="edit" />
        </div>
      </div>
    `,
  props: {
    text: String,
    record:{
      required:false,
      type:Object,
      default:()=>{}
    },
    itemName:{
      required:false,
      type:String,
    }
  },
  data() {
    return {
      value: this.text,
      editable: false,
      
    };
  },
  methods: {
    getColorFun(record, title) {
      let fscolor = "";
      if (
        typeof record.editObj == "undefined" ||
        record.editObj == null ||
        JSON.stringify(record.editObj) === "{}"
      ) {
        fscolor = "#000";
      } else {
        if (record.editObj[title] === "1") {
          fscolor = "#f00";
        } else {
          fscolor = "#000";
        }
      }
      return fscolor;
    },
    handleChange(e) {
      const value = e.target.value;
      this.value = value;
    },
    check() {
      this.editable = false;
      this.$emit('change', this.value);
    },
    edit() {
      this.editable = true;
    }
  }
};
import {dataSource} from "@/views/system/ceshi/json.js"
export default {
  components: {
    EditableCell
  },
  data() {
    return {
      pushArr:[],
      oldData:[],
      dataSource: dataSource,
      count: 2,
      btmPagination: {
        showSizeChanger: true,
        pageSizeOptions: ["10", "20", "50", "100", "150"],
        position: "bottom",
        size: "small",
        total: 0,
        current: 1, //默认显示第一页
        pageSize: 10, //每一页显示多少条
        showTotal: (total) => `共有 ${total} 条数据`
      },
      columns: [
        {
          title: 'item',
          dataIndex: 'itemKey',
        },
        {
          title: 'address',
          dataIndex: 'address'
        },
        {
          title: 'name',
          dataIndex: 'name',
          // width: 300,
          scopedSlots: { customRender: 'name' }
        },
        {
          title: 'school',
          dataIndex: 'school',
          scopedSlots: { customRender: 'school' }
        },
        {
          title: 'age',
          dataIndex: 'age'
        },
        {
          title: 'Total score',
          dataIndex: 'totalscore'
        },
        {
          title: 'operation',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' }
        }
      ]
    };
  },
  created(){
    
  },
  mounted(){
    let arr =[
          202201,
          202202,
          202203,
          202204,
          202205,
          202206
          ];
    
          arr.forEach(i=>{
              let obj ={
                  title:i.toString(),
                  dataIndex:i.toString(),
                  scopedSlots: { customRender: i.toString() },
              }
              
                    this.pushArr.push(i.toString())
                    this.columns.push(obj)
          })
          this.dataSource.forEach((item,index)=>{
            item['itemKey'] = index+1; //最重要的一个
            item['key'] = index; //也是一个重要参数
            item.editObj = {}
          })
          this.count =this.dataSource.length;
          this.oldData = this.shencopy(this.dataSource);
    
  },
  methods: {
    
    btmPaginationFun(val, size) {
      this.btmPagination.current = val.current;
      this.btmPagination.pageSize = val.pageSize;
    },
    shencopy(obj) {
      if (typeof obj !== "object") {
        return obj;
      }
      var res = Array.isArray(obj) ? [] : {};
      for (let i in obj) {
        res[i] = this.shencopy(obj[i]);
      }
      return res;
    },
    onCellChange(itemKey, dataIndex, value) {
      const dataSource = [...this.dataSource];
      const target = dataSource.find(item => item.itemKey === itemKey);
      if (target) {
        //对比之前的oldData数据
        if(this.shencopy(this.oldData)[target.key][dataIndex] != value){
          dataSource[target.key].editObj[dataIndex] = '1';
        }else{
          dataSource[target.key].editObj[dataIndex] = '2';
        }
        target[dataIndex] = value;
        this.dataSource = dataSource;
        
      }
    },
    onDelete(itemKey) {
      const dataSource = [...this.dataSource];
      this.dataSource = dataSource.filter(item => item.itemKey !== itemKey);
    },
    handleChildrenAdd(record) {
      let editObj={}

      this.pushArr.forEach(i=>{
        editObj[i.toString()] = '1'
      })
      //
      const { count, dataSource } = this;
      const newData = {
        itemKey:dataSource.length+1,
        key: count,
        name: record.name+'(Children:'+dataSource.length+')',
        age: 32,
        school:record.school+"复制的"+record.itemKey,
        address: `London, Park Lane no. ${count}`,
        editObj
      };
      let importantKey =""
       dataSource.forEach(function(item,index){
        if(record.itemKey==item.itemKey){
            importantKey = index
        }
         
      })
      dataSource.splice(importantKey+1 , 0, newData);
      
      this.dataSource = [...dataSource];
      this.count = count + 1;
    },
    handleAdd() {
      const { count, dataSource } = this;
      let editObj={}

      this.pushArr.forEach(i=>{
        editObj[i.toString()] = '1'
      })
      const newData = {
        itemKey:dataSource.length+1,
        key: count,
        name: `Edward King ${count}`,
        age: 32,
        address: `London, Park Lane no. ${count}`,
        editObj
      };
      this.dataSource = [...dataSource, newData];

      this.count = count + 1;
    }
  }
};
</script>
<style lang="scss" scoped>
/deep/.editable-cell {
  position: relative;
}

/deep/.editable-cell-input-wrapper{
  padding-right: 24px;
}
/deep/.editable-cell-text-wrapper {
  padding-right: 24px;
}

/deep/.editable-cell-text-wrapper {
  padding: 5px 24px 5px 5px;
}

/deep/.editable-cell-icon{
  position: absolute;
  right: 0;
  width: 20px;
  cursor: pointer;
}
/deep/.editable-cell-icon-check {
  position: absolute;
  right: 0;
  width: 20px;
  cursor: pointer;
}

/deep/.editable-cell-icon {
  line-height: 18px;
  display: none;
}

/deep/.editable-cell-icon-check {
  line-height: 28px;
}

/deep/.editable-cell:hover .editable-cell-icon {
  display: inline-block;
}

/deep/.editable-cell-icon:hover{
  color: #108ee9;
}
/deep/.editable-cell-icon-check:hover {
  color: #108ee9;
}

/deep/.editable-add-btn {
  margin-bottom: 8px;
}
</style>