【Vue2+Element ui通用后台】用户列表

新增用户

首先增加一个 ‘新增’ 按钮，点击弹出对话框来新增用户。弹出框可以使用 Element UI 的 Dialog对话框，其中 visible 表示是否显示 Dialog，支持 .sync 修饰符。我们点击新增按钮把这个标识置为 true，Dialog 即可显示

其中 Dialog 是一个表单，可以使用 Element UI 的 Form表单，其中 :model = 'form' 是表单数据对象，所以我们在下面的 data 中需要定义这个数据

export default {
   
  name: "Home",
  data(){
   
    return{
   
      dialogVisible: false,
      form:{
   
        name:'',
        age:'',
        sex:'',
        birth:'',
        addr:'',
      }
    }
  }
}

然后 form 中的内容，每条都需要使用 <el-form-item>。当垂直方向空间受限且表单较简单时，可以在一行内放置表单，可以使用:inline="true"

需要输入的用el-input，性别用 el-select 选择框，form 表单中有示例代码可以直接拿过来。日期可以使用 日期选择器

当点击确定的时候需要进行验证，我们可以参考 表单验证。Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可

用户列表

Element UI table

首先 api 下的 mockServeData 新增 user.js

import Mock from 'mockjs'

// get请求从config.url获取参数，post从config.body中获取参数
function param2Obj (url) {
   
    const search = url.split('?')[1]
    if (!search) {
   
        return {
   }
    }
    return JSON.parse(
        '{"' +
        decodeURIComponent(search)
            .replace(/"/g, '\\"')
            .replace(/&/g, '","')
            .replace(/=/g, '":"') +
        '"}'
    )
}

let List = []
const count = 200

for (let i = 0; i < count; i++) {
   
    List.push(
        Mock.mock({
   
            id: Mock.Random.guid(),
            name: Mock.Random.cname(),
            addr: Mock.mock('@county(true)'),
            'age|18-60': 1,
            birth: Mock.Random.date(),
            sex: Mock.Random.integer(0, 1)
        })
    )
}

export default {
   
    /**
     * 获取列表
     * 要带参数 name, page, limt; name可以不填, page,limit有默认值。
     * @param name, page, limit
     * @return {
   {code: number, count: number, data: *[]}}
     */
    getUserList: config => {
   
        const {
    name, page = 1, limit = 20 } = param2Obj(config.url)
        // console.log('name:' + name, 'page:' + page, '分页大小limit:' + limit)
        const mockList = List.filter(user => {
   
            if (name && user.name.indexOf(name) === -1 && user.addr.indexOf(name) === -1) return false
            return true
        })
        const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))
        return {
   
            code: 20000,
            count: mockList.length,
            list: pageList
        }
    },
    /**
     * 增加用户
     * @param name, addr, age, birth, sex
     * @return {
   {code: number, data: {message: string}}}
     */
    createUser: config => {
   
        const {
    name, addr, age, birth, sex } = JSON.parse(config.body)
        console.log(JSON.parse(config.body))
        List.unshift({
   
            id: Mock.Random.guid(),
            name: name,
            addr: addr,
            age: age,
            birth: birth,
            sex: sex
        })
        return {
   
            code: 20000,
            data: {
   
                message: '添加成功'
            }
        }
    },
    /**
     * 删除用户
     * @param id
     * @return {*}
     */
    deleteUser: config => {
   
        const {
    id } = JSON.parse(config.body)
        if (!id) {
   
            return {
   
                code: -999,
                message: '参数不正确'
            }
        } else