③. 表格(模板代码很关键)
3>. 表格(table)
①. 表格基础说明
①. 表格数据一般是 dataList: [ ],//当前页要展示的分页列表数据
②. v-loading:表格是否加载中
③. :fit:列的宽度是否自动撑开,默认是true
④. border：默认值是false(表格带有边框)
(默认情况下，Table 组件是不具有竖直方向的边框的，如果需要，可以使用border属性，它接受一个Boolean，设置为true即可启用)
⑤. height：只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。
(Table 的高度，默认为自动高度。如果 height为number类型,单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式)
⑥. max-height:Table 通过设置max-height属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。
⑦. @selection-change=“selectionRowsChange”:当我们选中复选框时,会触发事件,val表示这一行的值
⑧. @row-click=“handleRowChange”:当我们点击这一行时触发事件,row表示这一行的记录
table表格注意事项
(1). 画红圈的和绿圈都要一一对应
(2). 注意：row其实是一个json对象,json对象的结构为{ }
(3).这是table表格第二种获取值的方式,其中scope可以自己定义,scope表示一个插槽
②. 表格实战
- ①. 定义表头 | 插槽 | 复选框
②. 数据定义部分
③. 获取到该行的记录{{scope.row[scope.column.property]}}
④. 表格部分完整代码如下
<template> <el-container> <el-header class="query_params query_params_header"> <el-form :inline="true" :model="queryMap" ref="queryForm" target="exportIframe" > <input ref="export_f_columns" name="columns" type="hidden"></input> <input ref="export_f_usertoken" name="usertoken" type="hidden"></input> <input ref="export_f_multipleSelection" name="multipleSelection" type="hidden"></input> <el-form-item label="信息标题" style="width:230px"> <el-input v-model="queryMap.INFOTITLE" placeholder="信息标题" name="INFOTITLE" style="width:120px" /> </el-form-item> <el-form-item> <el-button type="primary" @click="query">查询</el-button> </el-form-item> </el-form> </el-header> <el-main> <el-table :data="tableData.data" border v-loading="loading" :fit="false" max-height="420" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column label="操作" width="120"> <template slot-scope="scope"> <el-button v-if="scope.row.iscancel!='1'" size="mini" @click="handleView(scope.$index, scope.row)">查看</el-button></template> </el-table-column> <el-table-column :prop="c.field" :label="c.title" :width="c.width" v-for="(c,i) in columns" :key="i"> <template slot-scope="scope" > <span v-if="c.field=='isissue'"> {{ scope.row.isissue=='1'?'已发布':'未发布' }} </span> <span v-else-if="c.field=='readerState'"> {{ scope.row.readerState=='1'?'未读':'已读' }} </span> <span v-else-if="c.field=='saveDatetime'"> {{scope.row.saveDatetime? formatDate(scope.row.saveDatetime):"" }} </span> <span v-else-if="c.field=='issueDatetime'"> {{ scope.row.issueDatetime?formatDate(scope.row.issueDatetime):"" }} </span> <span v-else-if="c.field=='readerTime'"> {{ scope.row.readerTime?formatDay(scope.row.readerTime):"" }} </span> <span v-else-if="c.field=='iscancel'"> {{ scope.row.iscancel=='1'?'是':'否' }} </span> <span v-else-if="c.field=='instancyGrade'"> {{ scope.row.instancyGrade=='1'?'紧急':'一般' }} </span> <del v-else-if="c.field=='infoTitle' && scope.row.iscancel=='1' " >{{scope.row.infoTitle}} </del> <span v-else> {{scope.row[scope.column.property]}}</span> </template> </el-table-column> </el-table> </el-main> <el-footer> <div class="pagination"> <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 20, 40]" :page-size="pagesize" layout="total, sizes,prev, pager, next" :total="tableData.count" prev-text="上一页" next-text="下一页"> </el-pagination> </div> </el-footer> <div class="mydialog"> <el-dialog title="查看信息" :visible.sync="showInfoViewPage" :modal-append-to-body="false" :fullscreen="true" > <InfoReleaseViewPage ref="infoViewPage" /> <div slot="footer" class="dialog-footer"> <el-button @click="showInfoViewPage = false">关闭</el-button> </div> </el-dialog> </div> </el-container> </template> <script> /*信息查看页面*/ import "@/styles/business-common.scss"; //信息查看API import {findInfoViewList} from '@/api/biz/inforelease' //基础方法封装 import { BaseViewMixins} from '@/mixins/biz/BaseViewMixins' //分页查询方法封装 import { QueryViewMixins} from '@/mixins/biz/QueryViewMixins' import vue from 'vue' import moment from 'dayjs';//时间操作 /*信息查看页*/ import InfoReleaseViewPage from '@/views/business/inforelease/inforelease_view/InfoReleaseViewPage.vue' export default { name: 'InforeleaseView',//信息查看页面 components: {InfoReleaseViewPage}, mixins: [ //基础方法封装 BaseViewMixins, //分页查询封装 QueryViewMixins ], data() { return { //表头 columns :[ {field:"infoTitle",title:"标题",width:"300"}, {field:"instancyGrade",title:"紧急程度",width:"80"}, {field:"staffname",title:"发布人",width:"80"}, {field:"unitName",title:"发布部门",width:"110"}, {field:"email",title:"发布邮箱",width:"100"}, {field:"infotypeName",title:"信息类型",width:"100"}, {field:"issueDatetime",title:"发布时间",width:"200"}, {field:"readerState",title:"是否已读",width:"100"}, {field:"readerTime",title:"阅读时间",width:"100"}, {field:"iscancel",title:"是否撤销",width:"100"}, ], currentPage: 1, //默认显示页面为1 pagesize: 10, // 每页的数据条数 tableData: {}, //需要data定义一些，tableData定义一个空数组，请求的数据都是存放这里面 loading:false, /*表格加载中*/ multipleSelection:[],//多选选中行 /*查询参数绑定表单*/ queryMap:{ ID: "", columns:"", usertoken:"", INFOTITLE:"" }, showInfoViewPage:false//显示查看信息弹窗 } }, watch: { //路由变化刷新 '$route.path': function (newVal, oldVal) { //查询数据 this.getData(this.currentPage,this.pagesize); } }, mounted(){ //查询数据 this.getData(this.currentPage,this.pagesize); }, created() { // init the default selected tab //刷新token this.refreshToken(); }, methods: { formatDate(d){ return moment(d).format("YYYY-MM-DD HH:mm:ss") }, formatDay(d){ return moment(d).format("YYYY-MM-DD") }, getData(page,limit) { //分享列表 this.getDataImpl(page,limit,findInfoViewList) }, //查看 handleView(i,row){ this.showInfoViewPage =true if(row.iscancel==1){ this.$message({message:"已撤销,不能查看",type: 'error'}); return ; } vue.nextTick(_ => { if(this.$refs.infoViewPage){//加载预览数据根据主表ID this.$refs.infoViewPage.reloadPage(row.id) } }); } } } </script> <style scoped> /*弹出框高度样式调整*/ .mydialog /deep/ .el-dialog__body { padding: 5px 5px; color: #606266; font-size: 14px; overflow :auto; height:80vh; } .query_params_header{ height:40px !important; } </style>
③. 模板代码
<template> <!--在以后的代码中,表头列一定要抽取出来,表格el-table可以作为模板写法 --> <!-- data:表格的数据绑定 v-loading：表格加载 fit:列的宽度是否自动撑开,默认是true border:表格带有边框 max-height:Table的最大高度,可以固定表头,当出现高度大于max-height的时候会出现滚动条 @selection-change="selectionRowsChange":当我们选中复选框时,会触发事件, val表示这一行的值 @row-click="handleRowChange":当我们点击这一行时触发事件,row表示这一行的记录 --> <el-table :data="tableData3" v-loading="loading" :fit="false" border max-height="420" @row-click="handleRowChange" @selection-change="selectionRowsChange" > <!--(1). 复选框select--> <el-table-column type="selection" width="55" :selectable="selectable" ></el-table-column> <!--(2). 序号index--> <el-table-column type="index" label="序号" width="60"></el-table-column> <!--(3). 表格table--> <el-table-column :prop="c.field" :label="c.title" :width="c.width" v-for="(c,i) in column" :key="i"> <!--(4). 这里是数据判断并显示,一定在最后要加上scope.row[scope.column.property] scope.row[scope.column.property]:表示显示从后台传来的数据 --> <template slot-scope="scope" > <!--(5). 三元运算符--> <span v-if="c.field=='sex'">{{scope.row.sex=='1'?'男':scope.row.sex=='0'?'女':'未知'}}</span> <span style="color: red" v-else-if="c.field=='SURVEYOBJECT'"> {{scope.row.SURVEYOBJECT=='STAFF'?"人员":"特约店"}} </span> <span v-else> {{scope.row[scope.column.property]}}</span> </template> </el-table-column> <!--(6). formatter函数用来格式化内容--> <el-table-column prop="IsAudit" :formatter="formatterColumn" label="审核状态" ></el-table-column> </el-table> </template> <script> export default { data() { return { column:[ {field:'sex',title:'性别',width:'60'}, {field:'name',title:'姓名',width:'60'}, {field:"OPEN_DATE",title:"开业时间",width:"95"}, ], loading:false,//表格加载 tableData3: [{ id:'1', date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', IsAudit:0, sex:'1', edit:false }, { id:'0', date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', sex:'0' }, { id:'3', date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', IsAudit:10, sex:'-1' }, { id:'3', date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', IsAudit:10, sex:'-1' }] } }, methods: { //当table中的复选框按钮选中的时候,会触发这个事件选中这一行所有的值 selectionRowsChange(val){ //val 选中的值 Array [ {…} ] console.log(val); }, //当我们点击行的时候触发的事件 handleRowChange(row, event, column){ // row此行的数据 //Object { id: Getter & Setter, date: Getter & Setter, name: Getter & Setter, address: Getter & Setter, sex: Getter & Setter, … } console.log(row) }, //选取指定的行 selectable(row, index){ if(index === 1){ return true; }else{ return false; } }, formatSex: function (row, column, cellValue, index) { return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知'; }, //状态改成汉字 formatterColumn(row, column) { switch(row.IsAudit){ case 0: return '未通过'; break; case 1: return '审核通过'; break; case 10: return '待审核'; break; case 9: return '草稿'; break; default: return '未知'; } } } } </script>
