刚接了一个新需求  ，自定义表格的行和列，没有想到好的实现方法，就用原生table写了一个，直接上代码：

先给大家展示一下效果：

 下面直接上代码：

<el-button style="margin-left: 10px; float: right;" size="small" @click="refresh">重置</el-button>
<table>
      <template v-for="(item,index) in tableProDate">
          <tr>
            <template v-for="inx in cellLength">
              <td>
                <el-input style="width:100px;" v-model="item['tagCell'+''+inx]" size="small" :placeholder="item.placeholder" clearable> </el-input>
              </td>
           </template>
           <el-button v-if="index == 0" style="border-style: dashed;margin-top: 10px;" size="small"  @click="addCell()">添加列</el-button>
           <el-button v-else style="border-style: dashed;margin-top: 10px;" size="small" @click="delRow(index)">删除行</el-button>
          </tr>
        </template>
        <el-button style="border-style: dashed;margin-top: 10px" size="small" @click="addRow()">添加行</el-button>
      </table>

定义一个 tableProDate 数组，这个数组为整个表格的数据，tagCellObj为一行数据的对象，通过Object.keys(this.tagCellObj).length来获取对象的长度来进行列的添加操作。

export default {
    name: "performance",
    mixins: [dialogsMixins,inquiryMixins],
    data () {
      return {
        tagCellObj:{ 
          tagCell1:'',
        },
        tableProDate:[
          {
            tagCell1:'',
            placeholder:'表头内容'
          },
        ],
        cellLength:1,
      }
    },
    methods: {
      refresh(){  //重置
        this.cellLength = 1
        this.tableProDate.length = 0
         this.tableProDate.push({
            tagCell1:'',
            placeholder:'表头内容'
          })
        this.tagCellObj = {
          tagCell1:'',
        }
      },
      addRow(){   //添加行
        let param = Object.assign({},this.tagCellObj,{placeholder:'内容'})
        this.tableProDate.push(param)
      },
      delRow(index){  //删除行
        this.tableProDate.splice(index,1)
      },
      addCell(){   //添加列
        this.cellLength = Object.keys(this.tagCellObj).length +1
        if( this.cellLength==6){
          return
        }
         let lable = 'tagCell'+this.cellLength
        this.tableProDate.map((item,index)=>{
          this.$set(item,lable, '');
          if(index==0){
            item.placeholder = '表头内容'
          }else{
             item.placeholder = '内容'
          }
        })
        this.$set(this.tagCellObj,lable, '');
      }
    }
  }

如果有其他好的实现方法请推荐一下，继续学习。。。