1500字范文 > vue+elementUI动态生成表格列

vue+elementUI动态生成表格列

时间：2024-02-16 21:27:31

<template><section><el-col :span="24" class="toolbar" style="padding-bottom: 0px;"><el-form :inline="true" :model="filters"><el-form-item><el-input v-model="filters.keyWord" placeholder="请输入名称"></el-input></el-form-item><el-form-item><el-button type="primary" v-on:click="getListData">查询</el-button></el-form-item><el-form-item><el-button type="primary" @click="handleEdit">新增</el-button></el-form-item></el-form></el-col><el-table :data="listData" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width:98%"><el-table-column type="selection" width="55"></el-table-column><el-table-column v-for="info in rightHeader" :key="info.key" :property="info.key" :label="info.label"><template slot-scope="scope">{{scope.row[scope.column.property]}} </template></el-table-column><el-table-column label="状态" prop="status"><template slot-scope="scope"><font v-if="scope.row.status === 1" color="green">使用</font><font v-else-if="scope.row.status === 0" color="red">禁用</font><font v-else color="blue">未知</font></template></el-table-column><el-table-column label="操作" width="150"><template scope="scope"><el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button><el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button></template></el-table-column></el-table><el-col :span="24" class="toolbar"><el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button><el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right;"></el-pagination></el-col><el-dialog title="编辑" v-model="editFormVisible" :close-on-click-modal="false"><el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm"><el-form-item v-for="info in rightHeader" v-bind:prop="info.key" :key="info.key" :property="info.key" :label="info.label"><el-input v-model="editForm[info.key]" auto-complete="off"></el-input></el-form-item><el-form-item label="状态" prop="status"><el-input v-model="editForm.status" auto-complete="off"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click.native="editFormVisible = false">取消</el-button><el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button></div></el-dialog></section></template><script>export default {data() {return {/*表头*/rightHeader:[{label: '档案编号',key: 'sn'},{label: '档案类型',key: 'archivesType_id'}],filters: {keyWord: ''},listData: [], //列表数据total: 0,//总条数currentPage: 1, //当前页pageSize:10, //每页条数listLoading: false,sels: [],//列表选中列editFormVisible: false,//编辑界面是否显示editLoading: false,/*表单验证字段*/editFormRules: {sn: [{required: true, message: '请输入档案类型名称', trigger: 'blur' }],status: [{required: true, message: '请输入状态', trigger: 'blur' }]},//编辑界面数据editForm: {id:0,sn:'',archivesType_id:'',archivesPoint_id:''}}},methods: {handleCurrentChange(val) {this.currentPage = val;this.getListData();},//获取档案管理数据列表getListData() {this.listLoading = true;let para = {currentPage: this.currentPage,pageSize:this.pageSize,keyWord: this.filters.keyWord};/*只需要全局修改__/archives/input/__即可*/this.$http.post("/archives/input/selectForList",para).then(res=>{console.log(res);let jsonResult = res.data;if (jsonResult.result){this.listData = jsonResult.data.result;this.total = jsonResult.data.total;}this.listLoading=false;}).catch(error=>{this.listLoading = false;this.$message({message: '服务器异常['+error.message+']', type: 'error' });})},//删除handleDel: function (index, row) {this.$confirm('确认删除该记录吗?', '提示', {type: 'warning'}).then(() => {this.listLoading = true;this.$http.delete("/archives/input/delete/"+row.id,{}).then((res) => {this.listLoading = false;if (res.data.result){this.$message({message: "删除"+res.data.message,type: 'success'});this.getListData();}});}).catch((error) => {this.listLoading = false;this.$message({message: "删除"+error.data.message,type: 'error'});});},/*表单重置*/resetForm(formName){if (this.$refs[formName] !== undefined) {this.$refs[formName].resetFields();}},//显示编辑界面handleEdit: function (index, row) {console.log("新增___",row);if (row == undefined ){//表单重置this.resetForm("editForm");this.editForm.id = 0;this.editFormVisible=true;}else{this.editFormVisible = true;console.log("row____",row);this.editForm = Object.assign({}, row);}},//编辑editSubmit: function () {this.$refs.editForm.validate((valid) => {if (valid) {this.$confirm('确认提交吗？', '提示', {}).then(() => {this.editLoading = true;let para = Object.assign({}, this.editForm);let url = "/archives/input/update";if (para.id == 0){url = "/archives/input/insert";}this.$http.post(url,para).then((res) => {this.editLoading = false;console.log(res);if (res.data.result){this.$message({message: res.data.message,type: 'success'});this.$refs['editForm'].resetFields();this.editFormVisible = false;this.getListData();}}).catch((error)=>{this.editLoading = false;this.$message({message: error.data.message,type: 'success'});});});}});},selsChange: function (sels) {console.log(sels);this.sels = sels;},//批量删除batchRemove: function () {//var ids = this.sels.map(item => item.id).toString();//迭代所选id组成一个数据作为参数传递var ids = this.sels.map(item => item.id);this.$confirm('确认删除选中记录吗？', '提示', {type: 'warning'}).then(() => {this.listLoading = true;//NProgress.start();let para = {ids: ids };console.log("para",para);this.$http.post("/archives/input/batchDelete",para).then((res) => {this.listLoading = false;//NProgress.done();console.log(res);if (res.data.result){this.$message({message: '删除成功',type: 'success'});this.getListData();}else {this.$message({message: res.data.message,type: 'error'});}});}).catch((error) => {this.listLoading = false;this.$message({message: '删除失败'+error.data.message,type: 'error'});});}},mounted() {this.getListData();}}</script><style scoped></style>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。