el-table 新增行 新增列 编辑删除

1、html 代码 红色为重点

:data替换为 自己的数据 

showTable 控制里表格的显示隐藏，用于增加列后的表格重新渲染

slot="header" 使用自定义表头 

列是动态遍历出来的 

<el-form >
  <el-form-item prop="servin">
    <template>
      <el-table v-if="showTable" v-loading="dataListLoading" :data="dataList" border  style="width: 100%;">
          <el-table-column header-align="center" align="center" v-for="(col,i) in colList" :key="i">
            <template slot="header" slot-scope="scope">
              <el-button @click.native.prevent="deleteCol(scope.$index, colList)" size="small">
                移除
              </el-button>
              <el-input size="mini" name="colNameList" :value='col'></el-input>
            </template>
              <template slot-scope="scope">
                <el-input size="mini" v-model="scope.row[col]"></el-input>
              </template>
          </el-table-column>
        <el-table-column align="center" header-align="center" label="操作">
          <template slot-scope="scope">
            <el-button @click.native.prevent="deleteRow(scope.$index, dataList)" size="small">
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <el-row>
      <el-col :span="12">
        <el-button style="width: 100%;" @click="addRow()" type="info" >新增行</el-button>
      </el-col>
      <el-col :span="12">
        <el-button style="width: 100%;" @click="addCol()" type="info" >新增列</el-button>
      </el-col>
    </el-row>
  </el-form-item>
</el-form>

2、vue js 部分 

 

export default {
  mixins: [mixinViewModule],
  data () {
    return {
      showTable: true,
     dataList: [],
      colList: [] // 动态获取自己列数据
    }
  },
  methods: {
    deleteRow (index, rows) {//删除改行
      rows.splice(index, 1);
    },
    deleteCol (index, col) {//删除改列
      col.splice(index, 1);
    },
    addRow () {             let row = {}
        this.colList.forEach(col=>{
        row[col]=''
        })    },
    addCol () {
      this.colList[this.colList.length] = ''
      this.showTable = false
      this.$nextTick(() => {
        this.showTable = true
      })
    }
  }
}

先记录后续完善