iview 引入 可参考：http://v1.iviewui.com/docs/guide/start
首先，在你的vue项目中安装iview依赖；
1）在你的命令窗口输入：npm install iview --save（记得要先进去你的文件所在目录）
2）安装之后，然后就在vue项目的入口文件（main.js）里全局引入它；
import iview from 'iview' import 'iview/dist/styles/iview.css' Vue.use(iview)如图: 先上效果图：
html部分：
<Table :columns="columns" size="small" style="margin-top:10px" :loading="listLoading" :data="list" disabled-hover> <template slot-scope="{row}" slot="action"> <Button :size="buttonSize" type="info" @click="handleDetail(row)">详情</Button> <Button :size="buttonSize" type="success" @click="handleUpdate(row)">编辑</Button> <Button :size="buttonSize" type="warning" @click="handleRecharge(row)">充值</Button> <Button :size="buttonSize" type="error" @click="handleDelete(row)">删除</Button> </template> </Table> <!-- 分页 --> <Page class="page" :page-size="pageSize" @on-page-size-change="handleSizerChange" @on-change="handleCurrentChange" :total="total" show-total show-elevator show-sizer></Page>在组件当中我们先来了解参数设置： 表格参数： 分页参数： 编写columns表头：
// 表头，参数接收样式设置 columns: [ { title: '名字', key: 'username', align: 'center' }, { title: '性别', key: 'sex', align: 'center' }, { title: '联系方式', key: 'contact', align: 'center' }, { title: '生日', key: 'birthday', align: 'center' }, { title: '余额', key: 'balance', align: 'center' }, { title: '会员等级', key: 'rank', align: 'center' }, { title: '操作', align: 'center', slot: 'action', width: 300 } ]效果图： 后台返回的数据类型：
"user":[{"balance":50911,"birthday":"1992-01-14","contact":13999999999,"id":1,"rank":"铂金会员","registTime":1569486626,"remarks":"管理员","sex":"女","status":1,"username":"001"}]注意到没有key和设置的表头的key一一对应
干货 js 代码：
export default { name: 'test', data () { return { datalist: { //可配置多个参数高级查询传入后端如分页数据 name: null }, page: 1, buttonSize: 'small', // 设置按钮大小 totalList: [], // 用于存放后端返回的所有数据 list: [], // 用于装载单页显示的表格数据 pageSize: 10, // 单页显示条数 total: 0, // 总数据条数 listLoading: false, // 是否加载模式 user: { username: null, sex: null, contact: null, birthday: null, balance: null, rank: null }, columns: [ { title: '名字', key: 'username', align: 'center' }, { title: '性别', key: 'sex', align: 'center' }, { title: '联系方式', key: 'contact', align: 'center' }, { title: '生日', key: 'birthday', align: 'center' }, { title: '余额', key: 'balance', align: 'center' }, { title: '会员等级', key: 'rank', align: 'center' }, { title: '操作', align: 'center', slot: 'action', width: 300 } ] } }, created () { // 页面初始化时加载的函数 this.getUserList() // 获取后端数据 }, methods: { // 时间戳转换为时间2019-09-27 16:30:27 timestampToTime (cjsj) { var date = new Date(cjsj * 1000) // 时间戳为10位需*1000，时间戳为13位的话不需乘1000 var Y = date.getFullYear() + '-' var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-' var D = date.getDate() + ' ' var h = date.getHours() + ':' var m = date.getMinutes() + ':' var s = date.getSeconds() return Y + M + D + h + m + s }, // 数据量大需要分页时传入 this.zqListQuery getUserList () { // 开启加载模式 this.listLoading = true // 这里是我自己封装的api之前的文章有讲到如何封装 this.$http.post(this.$ports.getdata.listPage, { name: this.datalist.name }).then(res => { // 存放所有数据 this.totalList = res.user // 总条数 this.total = this.totalList.length if (this.total < this.pageSize) { // 设置显示数据 this.list = this.totalList } else { // 设置显示数据 if (this.page !== this.zqListQuery.page) { this.list = this.totalList.slice((this.page - 1) * this.pageSize, this.page * this.pageSize) } else { this.list = this.totalList.slice(0, this.pageSize) } } this.listLoading = false }).catch(err => { console.log(err) }) }, // 切换每页条数 handleSizerChange (size) { this.pageSize = size if (this.total < this.pageSize) { this.list = this.totalList } else { this.list = this.totalList.slice(0, this.pageSize) } }, // 切换页 handleCurrentChange (index) { this.page = index var _start = (index - 1) * this.pageSize var _end = index * this.pageSize this.list = this.totalList.slice(_start, _end) }, // 按钮的方法就不一一介绍了 handleDetail (row) { // 获取当前行数据 this.user= Object.assign({}, row) // 时间戳转换为日期格式2019-09-27 16:30:27 this.user.registTime = this.timestampToTime(this.user.registTime) console.log(this.user) //this.dialogStatus = 'detail' //抽屉 //this.drawer_detail = true }, } }总结： 在使用组件的时候一定要细看API参数的使用
