一、Element UI中表格的渲染
  1. 对于页面表格中的数据,在页面一开始加载的时候就可以获取的到,可以使用created()的生命周期钩子函数,在里面去调用获取数据的方法,代码如下:
created () {
    this.getUserList()
 }
  1. data中定义需要使用到的数据,根据api接口返回的数据,queryInfo是获取用户列表的参数对象,userList是获取的用户列表,total是为数据的总数,代码如下:
data () {
    return {
      // 获取用户列表的参数对象
      queryInfo: {
        // 查询参数
        query: '',
        // 当前的页码数
        pagenum: 1,
        // 每页显示多少条数据
        pagesize: 2
      },
      // 获取的用户列表
      userList: [],
      // 总数
      total: 0
    }
 }
  1. method中,定义之前在created()中所调用的函数getUserList()。在getUserList()函数中,进行表格数据接口的调用。由于返回值为Promise对象,所以可以用asyncawait进行简化操作。通过响应的状态码判断,如果状态码不为200,说明获取数据失败,反之则获取数据成功。当数据获取成功以后,将响应获得的users赋值给data中的userList,响应获得的total赋值给data中的total,代码如下:
async getUserList () {
  const {data: res} = await this.$http.get('users', {
    params: this.queryInfo
  })
  if (res.meta.status !== 200) {
    return this.$message('获取用户列表失败!')
  }
  this.userList = res.data.users
  this.total = res.data.total
  console.log(res)
}
  1. 在获取到数据以后,我们就可以结合Element UITable表格组件绘制表格了。el-table 是可以定义一个表格, el-table-column 是可以定义表格中的一列。对于表格中的数据,可以根据el-table:data进行接收,绑定属性,绑定获取表格响应的数据,也就是data中定义的userList。对于每一项,可以根据el-table-column中的prop进行接收,通过接口中返回的数据,按照指定的字段进行接收,代码如下:
<el-table :data="userList">
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="username" label="用户名称"></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column prop="mobile" label="电话"></el-table-column>
        <el-table-column prop="role_name" label="角色"></el-table-column>
        <el-table-column prop="mg_state" label="状态">
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <!-- 修改按钮 -->
                <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
                <!-- 删除按钮 -->
                <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
                <!-- 分配角色按钮 -->
                <el-tooltip  effect="dark" content="分配角色" placement="top" :enterable="false">
                    <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
                </el-tooltip>
            </template>
        </el-table-column>
</el-table>
  1. 这样的表格可能看起来并不美观,我们可以为表格添加边框和斑马纹。在Table表格组件中,在Table Attributes中,有一个border属性,它的作用是是否带有纵向边框,是一个boolean类型,默认值为false,当设置为true的时候,表格就有边框了。在Table Attributes中,还有一个stripe属性,它的作用是是否为斑马纹 table,是一个boolean类型,默认值为false,当设置为true的时候,表格就有斑马纹了,代码如下:
<el-table :data="userList" :stripe="true" :border="true">
  1. el-table-column中,有一项为状态,我们可以使用Switch组件,去进行更改,通过template模版以及作用域插槽slot-scope="scope",在里面去插入Switch组件。在Switch组件中,我们可以通过v-model来获取其相应状态的值。通过scope.row, 可以取到当前一行的数据。在Switch中,有一个change事件,它的作用是switch 状态发生变化时的回调函数,回调参数是新状态的值。我们可以通过@change去绑定一个事件,当点击状态发生改变之后就会触发,代码如下:
<el-table-column prop="mg_state" label="状态">
    <template slot-scope="scope">
        <!-- scope.row 可以取到当前一行的数据 -->
        <!-- {{ scope.row }} -->
        <el-switch v-model="scope.row.mg_state" @change="userStateChange(scope.row)">
        </el-switch>
    </template>
</el-table-column>
  1. method中,定义之前绑定的方法serStateChange(scope.row),并且传入当前行的数据。通过点击,以及scope.row,就可以获取当前行的数据。在这个函数中,去调用状态改变的接口,获取到响应的数据。通过asyncawait去简化操作,因为返回值是一个Promise对象。如果响应的状态码不是200,说明更新失败了,就需要将状态更改为更新之前的状态,通过取反操作实现,反之则更新成功了,代码如下:
// 监听 switch 开关状态的改变
async userStateChange (userInfo) {
  // console.log(userInfo)
  const {data: res} = await this.$http.put(`users/${userInfo.id}/state/${userInfo.mg_state}`)
  if (res.meta.status !== 200) {
    // 更新失败,将状态返回初始状态
    this.userInfo.mg_state = !this.userInfo.mg_state
    this.$message.error('更新用户状态失败!')
  }
  this.$message.success('更新用户状态成功!')
}
二、Element UI中表格的分页
  1. 对于Element UI中表格数据的分页,我们可以使用Element UI中的Pagination分页组件。在el-pagination中,需要定义几个数据。size-changepageSize 改变时会触发,也就是每页显示的条数,绑定handleSizeChange事件。current-changecurrentPage 改变时会触发,也就是当前显示的页码数,绑定handleCurrentChange事件。current-page是当前的页数,可以将data中获取列表数据的当前页码数queryInfo.pagenum赋值给它。page-sizes是每页显示个数选择器的选项设置,我们可以根据实际的需求去设置,比如为[1, 2, 5, 10]page-size是每页显示的条目数,可以将data中获取的数据列表的每页显示的数据queryInfo.pagesize赋值给它。layout是组件布局,子组件名用逗号分隔。total是总条目数,代码如下:
<!-- 分页区域 -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  1. method中,定义@size-change所绑定的事件,handleSizeChange,用来监听 pagesize的改变,每页显示的条目数。 将监听接受到的每页显示多少条的数据 newSzie 赋值给 pagesize, 修改完以后,重新发起请求获取一次数据,代码如下:
// 监听 pageSize 改变的事件
handleSizeChange (newSize) {
  //  将监听接受到的每页显示多少条的数据 newSzie 赋值给 pagesize
  this.queryInfo.pagesize = newSize
  //  修改完以后,重新发起请求获取一次数据
  this.getUserList()
}
  1. method中,定义@current-change所绑定的事件,handleCurrentChange,监听当前页码值的改变。将监听接受到的当前页码值的数据 newPage 赋值给 pagenum,修改完以后,重新发起请求获取一次数据,这样分页功能就实现了,代码如下:
// 监听  pagenum 改变的事件
handleCurrentChange (newPage) {
  //  将监听接受到的页码值的数据 newPage 赋值给 pagenum
  this.queryInfo.pagenum = newPage
  //  修改完以后,重新发起请求获取一次数据
  this.getUserList()
}
三、Element UI中表格的搜索
  1. 对于搜索功能,我们可以使用input输入框,通过v-model实现双向数据绑定,而绑定的值就是获取用户列表的参数对象的查询参数queryInfo.query。在button按钮中,定义一个点击事件,调用getUserList()函数,当点击搜索以后,重新发起用户数据的请求,代码如下:
<el-input placeholder="请输入内容" v-model="queryInfo.query">
    <el-button slot="append" icon="el-icon-search" @click="getUserList()"></el-button>
</el-input>
  1. Element UIInput输入框组件中,在Input Attributes中,有一个clearable属性,它的作用是是否可清空,是一个boolean类型的值,默认为false,我们可以把它设置为true,这样在输入框中会有一个小x,当输入错误以后,点击一下就可以将输入框中所有的内容进行清空了。同时,为了点击以后,表格的数据能够重新获取最新的,我们可以在Input Events中,有一个clear事件,它的作用是在点击由 clearable 属性生成的清空按钮时触发。我们可以在@clear中,调用获取数据的方法getUserList()就可以了,代码如下:
<el-input placeholder="请输入内容" v-model="queryInfo.query" :clearable="true" @clear="getUserList()">
    <el-button slot="append" icon="el-icon-search" @click="getUserList()"></el-button>
</el-input>
四、Element UI中表格的渲染、分页和搜索功能的实现
  1. 表格的渲染、分页和搜索功能的实现,完整代码如下:
<template>
    <div>
        <!-- 卡片视图区域 -->
        <el-card class="box-card">
            <!-- 搜索与添加区域 -->
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getUserList()">
                        <el-button slot="append" icon="el-icon-search" @click="getUserList()"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary">添加用户</el-button>
                </el-col>
            </el-row>
            <!-- 用户列表区域 -->
            <el-table :data="userList" :stripe="true" :border="true">
                <el-table-column type="index"></el-table-column>
                <el-table-column prop="username" label="用户名称"></el-table-column>
                <el-table-column prop="email" label="邮箱"></el-table-column>
                <el-table-column prop="mobile" label="电话"></el-table-column>
                <el-table-column prop="role_name" label="角色"></el-table-column>
                <el-table-column prop="mg_state" label="状态">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.mg_state" @change="userStateChange(scope.row)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <!-- 修改按钮 -->
                        <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
                        <!-- 删除按钮 -->
                        <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
                        <!-- 分配角色按钮 -->
                        <el-tooltip  effect="dark" content="分配角色" placement="top" :enterable="false">
                            <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页区域 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pagenum"
                :page-sizes="[1, 2, 5, 10]"
                :page-size="queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
export default {
  data () {
    return {
      // 获取用户列表的参数对象
      queryInfo: {
        // 查询参数
        query: '',
        // 当前的页码数
        pagenum: 1,
        // 每页显示多少条数据
        pagesize: 2
      },
      // 获取的用户列表
      userList: [],
      // 总数
      total: 0
    }
  },
  created () {
    this.getUserList()
  },
  methods: {
    async getUserList () {
      const {data: res} = await this.$http.get('users', {
        params: this.queryInfo
      })
      if (res.meta.status !== 200) {
        return this.$message('获取用户列表失败!')
      }
      this.userList = res.data.users
      this.total = res.data.total
      console.log(res)
    },
    // 监听 pageSize 改变的事件
    handleSizeChange (newSize) {
    //  将监听接受到的每页显示多少条的数据 newSzie 赋值给 pagesize
      this.queryInfo.pagesize = newSize
      //  修改完以后,重新发起请求获取一次数据
      this.getUserList()
    },
    // 监听 页码值  改变的事件
    handleCurrentChange (newPage) {
    //  将监听接受到的页码值的数据 newPage 赋值给 pagenum
      this.queryInfo.pagenum = newPage
      //  修改完以后,重新发起请求获取一次数据
      this.getUserList()
    },
    // 监听 switch 开关状态的改变
    async userStateChange (userInfo) {
      console.log(userInfo)
      const {data: res} = await this.$http.put(`users/${userInfo.id}/state/${userInfo.mg_state}`)
      if (res.meta.status !== 200) {
        // 更新失败,将状态返回初始状态
        this.userInfo.mg_state = !this.userInfo.mg_state
        this.$message.error('更新用户状态失败!')
      }
      this.$message.success('更新用户状态成功!')
    }
  }
}
</script>

<style lang="less" scoped>

</style>
  1. 表格的渲染、分页和搜索功能的实现效果


elementui獲取到日期 elementui表格获取数据_ElementUI