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>
      
      
      <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>