vue+elementUI动态生成表格列

<!--档案点管理-->
<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><!-- 设置表头数据源，并循环渲染出来，property对应列内容的字段名，具体查看数据源格式 rightHeader--><!--动态展示数据  :key__属性名  :property__属性值  :label__表头名称--><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><!--格式化状态列__在此处有的列,要在数据源rightHeader_去除__不然重复--><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="启用状态"><template slot-scope="scope"><el-switchv-model="scope.row.status":active-color="ACT_COLOR":inactive-color="INACT_COLOR"></el-switch></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><!--如果有字段没在rightHeader--><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>

vue+elementUI动态生成表格列相关推荐

Vue + ElementUI 动态生成面包屑导航教程
在Web应用程序中,面包屑导航是一种常用的导航方式,它可以帮助用户更好地理解当前页面的位置和层次关系.在Vue项目中,结合ElementUI组件库,我们可以很容易地实现一个动态生成面包屑导航的功能.本 ...
vue+element-ui动态生成多级表头，并且将有相同字段下不同子元素合并为同一个...
element表头要多层生成,下一级表头数据源必须是当前表头的子一级,这样一层一层嵌套可以生成多层表头: 要把数据处理成这种类型的数据 var arr = [];for (var key in obj ...
vue+elementUI实现sku表格自动生成【效果图+源码】
vue+elementUI实现sku表格自动生成[效果图+源码] 先看一看效果图: 点击这里下载源码,下载后记得安装依赖:npm install
FineUIMvc随笔（1）动态创建表格列
声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. <FineUIMvc随笔>目录 FineUIMvc随笔(1)动态创建表格列 FineUIMvc随笔(2)怎样在控件中 ...
一段动态生成表格的JSP代码讲解
一段动态生成表格的JSP代码讲解 <table border="1" width="600px" align="center"> ...
JS实现动态生成表格并提交表格数据向后端表格中数据转为json
原文地址需求:在web页面上动态的生成表格,并可以对表格中的数据进行编辑,然后把表格中的数据提交至后端服务器保存. 首先动态生成表格. 1.首先我们需要导入JS库文件.jQuery 2.然后在页面d ...
Extjs 动态生成表格
在web显示数据时,会遇到grid的列数和行数不确定的这种情况.如何来根据数据动态的创建表格呢? Extjs 的json data给我们带来了一个很好的比较简单的方法. 要创建一个grid需要确定它的 ...
django通过ajax请求接口返回多条数据，并动态生成表格，请求表单后将表格数据并入库
一.最近在做接口相关的开发,需求是这样的,通过一个接口所需要传递的参数,调用接口后,处理接口响应的参数,返回多条数据,并动态生成表格,请求表单后将表格的数据入库,下面是我改过的代码,跟实际代码有些出入 ...
javascript案例：动态生成表格
js案例:动态生成表格一.文字梳理 * 创建一个页面:两个输入框和一个按钮 * 第一步:得到输入的行和列的值 * 第二步:生成表格 - 循环行 - 在行里面循环单元格 * 第三步:把表格(表格放到变 ...

vue+elementUI动态生成表格列

vue+elementUI动态生成表格列相关推荐

最新文章

热门文章