1. 多语言的列表页

先看看一个列表页有哪些元素吧?

菜单tab的公共元素就忽略了,这里仅仅聚焦内容。在这里插入图片描述

这里面对于前端的书写来说，一般新手应该问题都不大，麻烦点在于

搜索框定制
列表头定制
新增form单定制等

2.后端丰富的信息

由于大部分后端在设计数据库时，基本涵盖了很多信息，例如，列头、名称、类型、词典等，因此前后端结合起来，可以大大减轻前端的工作量。

在这里插入图片描述这是取自数据库的信息，可以很容易的取到很多信息，当然还有一种方式是，从swagger的api文档信息里获取字段等信息，应该是同样的道理。

最笨的就是Ctrl+C、 Ctrl+V了，哎，手酸~~~~

3.配置驱动

既然我们可以获取到这么多的元数据信息,那么有必要提取出纯粹的元数据,然后按照数据驱动列表的绘制。由于项目比较紧，我这里仅仅是粗略的提取了一下，大家将近看看。 config.js文件内容如下,我们直接利用工具生成js文件。

export default {

    model:'sysDept',
    name:'',
    key:'id',    
    columns:[

        {
        field:'id',
        name:'',
        width:0,
        type: 'text',
        filter: '',
        },

        {
        field:'createby',
        name:'创建人',
        width:0,
        type: 'text',
        filter: '',
        },


    ],
    forms:[

        {
        field:'id',
        name:'',
        width:0,
        type: 'text',
        filter: '',
        },

        {
        field:'createby',
        name:'创建人',
        width:0,
        type: 'text',
        filter: '',
        },


    ],
}

通过columns绘制列表，通过forms绘制表单。

资源化文件同样可以自动产生。

sysDept:{
    id:'',
    createby:'创建人',
    createtime:'创建时间/注册时间',
    modifyby:'最后更新人',
    modifytime:'最后更新时间',    
},


// SysDept 英文汉化

sysDept:{
    id:'Id',
    createby:'Createby',
    createtime:'Createtime',
    modifyby:'Modifyby',
    modifytime:'Modifytime',    
},

4.绘制列表

这里采用elementui的el-table进行绘制列表,因为已经拥有数据了，因此绘制很轻松。这里对过滤器做了处理，利用定制的 myEval函数进行绘制。

<el-table  :data="list" v-loading="listLoading" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column 
        type="index"        
        align="center"
        width="50"
        label="#"
        :index="table_index"  
        >
      </el-table-column>
    <el-table-column v-for="(item,index) in columns" :key="index"      
      :label="$t(model + '.' + item.field)"      
      :width="item.width==0?null:item.width"> 
         <template slot-scope="scope">  
             <template v-if="item.filter.length==0">         
                {{scope.row[item.field]}}
             </template>
            <template v-else>         
                 {{myEval(item.filter)(scope.row[item.field])}}
             </template>
        </template>       
    </el-table-column>
    <el-table-column label="操作" width="360" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" icon="el-icon-edit" @click.native="edit(scope.row)" v-permission="['/mgr/edit']">
            {{$t('button.edit') }}
          </el-button>          
          <el-button type="danger" size="mini" icon="el-icon-delete" @click.native="remove(scope.row)" v-permission="['/mgr/delete']">
            {{$t('button.delete') }}
          </el-button>         
        </template>
      </el-table-column>

  </el-table>

表单的绘制类似，当然我们需要对 tpye进行扩展,可以支持非常多的表单组件。

5.小结

我是新手，希望能给你提供一个思路。仅此而已！搜索框的后续有空再写文章，记得关注我哦。

Vue的增删改查--基于配置文件驱动的前端页面

1. 多语言的列表页

2.后端丰富的信息

3.配置驱动

4.绘制列表

5.小结