VUE 实现table 动态增加行增加列，且行内属性自定义，行内内容可编辑，标题栏内容可编辑_vue table新增行 自定义id

VUE 实现table 动态增加行增加列，且行内属性自定义，行内内容可编辑，标题栏内容可编辑

最终实现效果如下图

  源码

<template>
  <div class="edit-box">
    <div class="botom-box">
        <Button type="primary" size="small" @click="AddRow">增加行</Button>
        <Button type="primary" size="small" @click="AddColumn">增加列</Button>
    </div>
    <div class="data-box" ref="tabdiv">
        <Table :height="tabheight" border :columns="columndata" :data="rowsdata" class="table-css"></Table>
    </div>
  </div>
</template>
 
<script>
 
export default {
 
  data() {
    return {
      tabheight:0,
      columndata:[
        {
          title: '名称',
          key: 'name',
          width:150,
          fixed: 'left',
          resizable:true ,
          render: (h, params) => {
            var _this = this;
            return h('div', [
              h('Icon', {
                props: {
                    type: 'md-close-circle',
                    size:"15"
                }, 
                style:{
                  color:'#FF0000',
                  cursor: 'pointer',
                  float:'left',
                  margin:"5px 10px 0px 0px"
                },
                on: {
                    click: () => {
                      if(_this.rowsdata.length>1){
                        _this.rowsdata.splice(params.index,1);
                      }else{
                        this.$Message.warning('至少要保留一行数据！');
                      }
                    }
                }
              }),
              h('Input', {
                props: {
                  value: params.row[params.column.key],
                },
                style:{
                  width:'75%',
                  float:'left'
                },
                on: {
                  'on-change': event => {
                    params.row[params.column.key] = event.target.value;
                    _this.rowsdata[params.index]= params.row;
                  },
                }
              })
            ])
          }
        },
        {
          title: '属性值',
          key: 'value1',
          width:120,
          resizable:true,
          render: (h, params) => {
            var _this = this;
            return  h('InputNumber', {
              props: {
                value: params.row[params.column.key],
                step: 1,
              },
              style:{
                width:'100%',
                float:'left'
              },
              on: {
                'on-change': event => {
                  params.row[params.column.key] = event;
                  _this.rowsdata[params.index]= params.row;
                },
              }
            })
          },
          renderHeader:(h, params,) => {
            var _this = this;
              return h('div', [
                h('Icon', {
                  props: {
                      type: 'md-close-circle',
                      size:"15"
                  }, 
                  style:{
                    color:'#FF0000',
                    cursor: 'pointer',
                    float:'left',
                    margin:"5px 10px 0px 0px"
                  },
                  on: {
                      click: () => {
                        if(_this.columndata.length>2){
                          _this.columndata.splice(params.index,1);
                        }else{
                          this.$Message.warning('属性值至少保留一列！');
                        }
                      }
                  }
                }),
                h('Input', {
                props: {
                  value: params.column.title,
                },
                style:{
                  width:'70%',
                  float:'left'
                },
                on: {
                  'on-change': event => { 
                    params.column.title = event.target.value;
                    _this.columndata[params.index]= params.column;
                  }
                }
              })
            ])
          }
        }
      ],
      rowsdata:[
          {name:'苹果',value1:11}
      ],
      columnIndex:1//当前动态添加列的数量
    }
  },
  methods: {
    AddRow(){
      var row = JSON.parse(JSON.stringify(this.rowsdata[0]));
      for(var name in row){
        if(name=="name"){
          row[name]="name";  
        }else{
          row[name]=0;  
        }     
      } 
      this.rowsdata.push(row);
    },
    AddColumn(){
      this.columnIndex++;
      var keyName = 'value' + this.columnIndex;
      this.rowsdata.forEach((value , index) => {
        value[keyName] = 0;
      })
      var column = {
          title: '属性值'+this.columnIndex,
          key: keyName,
          width:120,
          resizable:true,
          render: (h, params) => {
            var _this = this;
            return  h('InputNumber', {
              props: {
                value: params.row[params.column.key],
                step: 1,
              },
              style:{
                width:'100%',
                float:'left'
              },
              on: {
                'on-change': event => {
                  params.row[params.column.key] = event;
                  _this.rowsdata[params.index]= params.row;
                },
              }
            })
          },
          renderHeader:(h, params,) => {
            var _this = this;
              return h('div', [
                h('Icon', {
                  props: {
                      type: 'md-close-circle',
                      size:"15"
                  }, 
                  style:{
                    color:'#FF0000',
                    cursor: 'pointer',
                    float:'left',
                    margin:"5px 10px 0px 0px"
                  },
                  on: {
                      click: () => {
                        if(_this.columndata.length>2){
                          _this.columndata.splice(params.index,1);
                        }else{
                          this.$Message.warning('属性值至少保留一列！');
                        }
                      }
                  }
                }),
                h('Input', {
                props: {
                  value: params.column.title,
                },
                style:{
                  width:'70%',
                  float:'left'
                },
                on: {
                  'on-change': event => { 
                    params.column.title = event.target.value;
                    _this.columndata[params.index]= params.column;
                  }
                }
              })
            ])
          }
        }
      this.columndata.push(column);
    }
  },
  mounted() {
    this.tabheight = window.innerHeight*0.5695;
  }
}
</script>
 
<style scoped>
  .edit-box{ width: 100%; height: 60vh; font-size: 14px;}
  /* padding: 1vh 1vw;  */
  .botom-box {width: 100%; height: 3vh; text-align: right;}
  .data-box{ float:left; width: 100%; height:57vh;border: 1px solid rgb(211, 214, 208);    border-radius: .133333rem;}
 
  /* 滚动条 */
  .table-css >>> .ivu-table-overflowY::-webkit-scrollbar {
      width: 10px;
      height: 10px;
  }
  .table-css >>> .ivu-table-overflowX::-webkit-scrollbar {
      width: 10px;
      height: 10px;
  }
</style>