灵活的自定义表格行列以及增删改查的操作,右键选中列则是列的删除，效果如下
文章来源：https://www.toymoban.com/news/detail-680292.html
<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>为了方便可以直接复制代码查看效果已把动态数据换成自定义数据文章来源地址https://www.toymoban.com/news/detail-680292.html
到了这里，关于element-table的动态操作，表格动态新增行、列，删除行列的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
