element-table的动态操作，自动以表格，动态新增行、列，删除行列-Toy模板网

这篇具有很好参考价值的文章主要介绍了element-table的动态操作，自动以表格，动态新增行、列，删除行列。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

灵活的自定义表格行列以及增删改查的操作,右键选中列则是列的删除，效果如下

element-table的动态操作，自动以表格，动态新增行、列，删除行列,vue.js,javascript,elementui

<template>
  <div class="st-table">
    <div style="width: 100%">
      <el-button @click="addRow()" type="primary" icon="CirclePlus">新增行</el-button>
      <el-button @click="addCol()" type="primary" icon="CirclePlus">新增列</el-button>
      <el-input type="text" placeholder="请输入关键字查询" v-model="tableParam.keyword" style="width: 200px;"/>
      <el-button type="info" @click="queryList()">查询</el-button>
    </div>
    <el-table :data="tableData" border style="width: 100%" @header-contextmenu="cellClick">
      <el-table-column prop="type" label="类型" width="180">
        <template slot-scope="scope">
          <el-input type="text" v-model="scope.row.type" v-show="scope.row.iseditor" />
          <span v-show="!scope.row.iseditor">{{scope.row.type}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="code" label="编码" width="180">
        <template slot-scope="scope">
          <el-input type="text" v-model="scope.row.code" v-show="scope.row.iseditor" />
          <span v-show="!scope.row.iseditor">{{scope.row.code}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="value" label="值" width="180">
        <template slot-scope="scope">
          <el-input type="text" v-model="scope.row.value" v-show="scope.row.iseditor" />
          <span v-show="!scope.row.iseditor">{{scope.row.value}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="名称">
        <template slot-scope="scope">
          <el-input type="text" v-model="scope.row.name" v-show="scope.row.iseditor" />
          <span v-show="!scope.row.iseditor">{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <!-- 添加列 -->
      <el-table-column v-for="(item,index) in tableHeader" :prop="item" :key="index" :label="item">
        <template slot-scope="scope">
          <el-input type="text" v-model="scope.row.item" v-show="scope.row.iseditor" style="position: relative;"/>
          <span v-show="true"></span>
        </template>
      </el-table-column>
      <!-- 添加列 -->
      <el-table-column label="操作" width="240" align="center">
        <template slot-scope="scope">
          <el-button type="primary" @click="edit(scope.row)">编辑</el-button>
          <el-button type="primary" @click="saves(scope.row)">保存</el-button>
          <el-button type="danger" @click="delRow(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="添加表格列" :visible.sync="dialogFormVisible" :modal='false' :close-on-click-modal="false" width="30%">
      <el-input v-model="colName" placeholder="请输入要增加的列名" style="width: 100%;"></el-input>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="getcol()">确 定</el-button>
      </div>
    </el-dialog>
    <div class="toolbar" style="padding: 25px;">
      <pagination v-show="tableParam.total>0" :total="tableParam.total" :page.sync="tableParam.pageNumber" :limit.sync="tableParam.pageSize" @pagination="queryList"/>
    </div>
  </div>
</template>
<script>
import { openMessageSuccess, openMessageWarning, openMessageError } from '@/api/assembly/openMessage'
import Pagination from '@/components/Pagination'
import {query, save,del} from '@/api/zczy/dict'
export default {
  components: {
      Pagination
    },
  created() {
    this.initData()
    document.oncontextmenu = function(){return false}
  },
  data() {
    return {
      colName: '',
      tableParam: {
          pageNumber: 0,
          pageSize: 10,
          total: 0,
          keyword: "",
        },
      tableData: [
        {
          code: "cs1",
          value: "1",
          name: "测试1",
          iseditor: false
        },
        {
          code: "cs2",
          value: "2",
          name: "测试2",
          iseditor: false
        }
      ],
      tableHeader: [],
      dialogFormVisible: false,
      delVisible: false
    };
  },
  methods: {
    queryList(){
      query(this.tableParam).then(res => {
          this.tableData = res.list
          this.tableParam.total = res.total
          this.tableParam.pageNumber = res.pageNumber
          this.tableParam.pageSize = res.pageSize
          this.tableData.forEach(element => {
            this.$set(element,'iseditor',false)
          });
        })
    },
    // 新增行
    addRow(){
      const row = {
          code: "",
          value: "",
          name: "",
          iseditor: true
      };
      this.tableData.push(row)
    },
    //新增列
    addCol(){
      this.dialogFormVisible = true
      if(this.colName !==''){
        this.tableHeader.push(this.colName)
      }
    },
    getcol(){
      this.addCol()
      this.dialogFormVisible = false
      this.colName = ''
    },
    //删除列
    cellClick(column, event) {
      this.$confirm('是否删除列：'+column.label+' ?', "提示", {confirmButtonText: '确定', type: 'info'}).then(() => {
        openMessageSuccess('测试')
            //   saveProject(this.rowData).then(res => {
            //   openMessageSuccess(res.msg)
            //   this.dealClose()
            // })
          })
    },
    delRow(row) {
      const index = this.tableData.indexOf(row)
      this.tableData.splice(index, 1);
      let params = {id:row.id}
      del(params).then(res=>{
        openMessageSuccess(res.msg)
        this.queryList()
      })
    },
    edit(row) {
      row.iseditor = true;
    },
    saves(row) {
      save(row).then(res=>{
        openMessageSuccess(res.msg)
        this.queryList()
      })
    },
    //初始化数据
    initData() {
      // this.queryList()
    }
    },
  }
</script>
<style>
  .mybtn{
    color: #fff;
    background-color: #67c23a;
    border-color: #67c23a;
  }
</style>