element-table的动态操作,自动以表格,动态新增行、列,删除行列

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

复制代码
<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>

为了方便可以直接复制代码查看效果已把动态数据换成自定义数据

相关推荐
前端君5 小时前
实现最大异步并发执行队列
javascript
知识分享小能手7 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队8 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
萌萌哒草头将军8 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
Qlittleboy8 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
小白菜学前端8 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿8 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
GDAL8 小时前
Knockout.js 任务调度模块详解
javascript·knockout
椒盐螺丝钉8 小时前
Vue组件化开发介绍
前端·javascript·vue.js
koooo~9 小时前
v-model与-sync的演变和融合
前端·javascript·vue.js