Vue实战开发--后台管理系统Vue+Element ui（11）

本节课完成用户列表表单设计，使用table组件，同样模块化组件，CommonTable.vue组件，并且在User页面中引入，mock实现数据模拟，最终完成用户列表多项功能，实现新增，搜索，编辑，删除功能。

1.CommonTable.vue

首先是基本信息页面el-table的data属性用于接收table的外部数据tableData，因此添加props，类型是Array，高度90%，stripe属性表示斑马条纹样式。el-table-column表示表头和第一行的内容，后面数据可以循环使用。show-overflow-tooltip表示过长数据用tooltip样式显示。props添加tableLabel，类型为Array，v-for遍历tableLabel（姓名、年龄、性别、出生日期、地址），label就主键名，设置宽度width，如果数据自带宽度就使用item.width，没有则设置125。<template slot-scope="scope"></template>，这是一个固定写法。slot是插槽，有两个重要性质，显示或不显示、怎样显示都是由父组件决定。{{ scope.row[item.prop] }}拿到列的数据并进行渲染。

接下来操作页，表头显示“操作”，表内显示“编辑、删除”。el-table-column下存在两个button。两个button都要设置点击事件，用函数方式。

分页组件使用Pagination组件，在el-table下方添加el-pagination，layout属性，total表示总的数据的数量。在props添加config，total是config下的一个属性，类型是Object。current-page.sync表示当前的页面数，添加点击事件changePage。page-size表示一页里有多少条数据，这里设置20。

更改样式，表格相对定位，页数绝对定位。

<template>
  <div class="common-table">
    <el-table :data="tableData" height="90%" stripe>
      
      <el-table-column
        show-overflow-tooltip
        v-for="item in tableLabel"
        :key="item.prop"
        :label="item.label"
        :width="item.width ? item.width : 125"
      >
        <template slot-scope="scope">
          <span style="margin-left=10px">{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="180">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>

      </el-table-column>
    </el-table>
    <el-pagination
      class="pager"
      layout="prev,pager,next"
      :total="config.total"
      :current-page.sync="config.page"
      @current-change="changePage"
      :page-size="20"
    >
    </el-pagination>
  </div>
</template>


<script>
export default {
  name: "CommonTable",
  props: {
    tableData: Array,
    tableLabel: Array,
    config:Object,
  },
  data() {
    return {};
  },
  methods: {
    handleEdit() {

    },
    handleDelete() {

    },
    changePage() {

    }
  },
};
</script>
<style lang="less" scoped>
.common-table {
  height: calc(100% - 62px);
  background-color: #fff;
  // position: relative;
  .pager {
    position: absolute;
    bottom: 0;
    right: 20px;
  }
}
</style>

2.在User页面引入CommonTable组件

引入

import CommonTable from '../../src/components/CommonTable.vue'

        components:{
            CommonTable
        },

编写数据上传函数，row、page表示数据提交的数据，$emit可以将数据提交到父组件，edit、del、changePage为自定义名称。

  methods: {
    handleEdit(row) {
        this.$emit('edit',row)
    },
    handleDelete(row) {
        this.$emit('del',row)
    },
    changePage(page) {
        this.$emit('changePage',page)
    }
  },

正式使用组件<common-form>，tableData暂时为空数组，tableLabel为表头的主键。地址和出生日期较长，我们加上宽度。config为分页数据，page为1，表示默认为第一页，total为总页数设置为30（不清楚）。common-form还需要添加三个事件，changePage、edit、del事件。三个事件均为函数。

        <common-table
            :tableData="tableData"
            :tableLabel="tableLabel"
            :config="config"
            @changePage="getList()"
            @edit="editUser"
            @del="delUser">
            </common-table>

                tableData:[],
                tableLabel:[
                    {
                        prop:"name",
                        label:"姓名"
                    },
                    {
                        prop:"age",
                        label:"年龄"
                    },
                    {
                        prop:"sexLabel",
                        label:"性别"
                    },
                    {
                        prop:"birth",
                        label:"出生日期",
                        width:200
                    },
                    {
                        prop:"addr",
                        label:"地址",
                        width:320
                    },
                ],
                config:{
                    page:1,
                    total:30,
                },

            }
        },

            editUser(){
            },
            delUser(){
            },
            getList(){
            }

mockServeData文件夹中提前放入user.js文件，在网盘链接里有（链接在第五节课），在tableData需要用mock引入，用mock生成数据。在mock.js中进行拦截ajax，getUserList是User.js的函数，这里写的是拦截器。

Mock.mock(/user\/getUser/,'get',userApi.getUserList)

在data.js调用mock拦截器，拦截器和接口调用要一致。

export const getUser = (params) => {
    return axios.request({
        url:'/user/getUser',
        method:'get',
        params
    })
}

回到页面对接口就进行引入调用。

import { getUser } from '../../api/data'

在getList（）调用，传入参数name，name默认为空。判断name存不存在，如果name存在，那么将当前页码置为1。如果不存在，页码置空。

            getList(name=''){
                    this.config.loading = true
                    name ? (this.config.pag = 1) : ''
                    getUser({
                        page:this.config.page,
                        name
                    }).then(({ data:res })=>{
                        console.log(res,'res')
                        this.tableData = res.list.map(item=>{
                            item.sexLabel = item.sex === 0 ? "女" : "男"
                            return item
                        })
                        this.config.total = res.count
                        this.config.loading = false
                    })
            }

添加生命周期对getList（）方法进行调用

        created(){
            this.getList()
        },

在confirm（）发最后调用getList（）函数。

            confirm(){
                if(this.$operateType === 'edit'){
                    this.$http.post('/user/edit',this.operateForm).then(res => {
                        console.log(res)
                        this.isShow = false
                        this.getList()
                    })
                }else{
                    this.$http.post('/user/add',this.operateForm).then(res => {
                        console.log(res)
                        this.isShow = false
                        this.getList()
                    })
                }
            },

定义editUser()

            editUser(row){
                this.operateType = 'edit'
                this.isShow = true
                this.operateForm = row
            },

定义delUser(),接收参数$confirm，第一个参数是提示内容，第二个参数是提示标题，第三个是参数是按钮文本，弹窗类型为warning。箭头函数，拿到当前数据，拿到id，调用api进行删除，删除api为"/user/del"，并且需要传入数据的id，给出提示信息，并且调用getList。

            delUser(row){
                this.$confirm("此操作将永久删除该文件，是否继续？","提示",{
                    confirmButtonText:"确认",
                    canceIButtonText:"取消",
                    type:"warning"
                }).then(()=>{
                    const id = row.id
                    this.$http.post("/user/del",{
                        params:{ id }
                    }).then(()=>{
                        this.$message({
                            type:'success',
                            message:'删除成功'
                        })
                        this.getList()
                    })
                })
            },

定义mock删除，deleteUser为mock里user.js的函数

Mock.mock(/user\/del/,'post',userApi.deleteUser)

页面效果

3.继续完善搜索功能

添加searchFrom.keyword即可，sharchFrom之前有定义过，里面的keyword字段默认为空。

<el-button type="primary" @click='getList(searchFrom.keyword)'>搜索</el-button>

 效果

编辑功能显示信息

在点击编辑时调用handledit，这里需要用<template slot-scope="scope">拿到数据，然后将原有的两个button放在template里面。

删除功能

此时点击删除功能是没有反应的，需要添加MessageBox、Message组件，！！！请注意，就是之前是全局引入，这里也必须单独引入MessageBox、Message（原因未知）。并且绑定到prototype属性上。

import { Message,MessageBox } from 'element-ui';
Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$message = Message

 

 至此，用户列表页面全部完成。