图例
格式
<div class="a">评价列表</div> <div> <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%" > <el-table-column prop="name" label="评价指标"> <template slot-scope="scope"> <el-tooltip class="item" effect="dark" content="这里展示问题内容作为辅助显示" placement="top"> <!-- <el-input v-model="tableData.name" placeholder="请输入"></el-input> --> <el-button type="text" @click="dialogVisible = true">{{scope.row.name}}</el-button> </el-tooltip> </template> </el-table-column> <!-- <el-table-column prop="name" label="评价指标"></el-table-column> --> <el-table-column prop="address" label="部门" width="180"></el-table-column> <el-table-column prop="fraction" label="分数" width="180"></el-table-column> </el-table> <div class="pag"> <!-- <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination> --> <el-pagination small layout="total,prev,pager,next,jumper" :total="tableData.length" :page-size="pagesize" :current-page="currentPage" @current-change="handleCurrentChange" ></el-pagination> </div>数据
data() { return { // 表格 tableData: [ { date: "基础一部", name: "一、合程性指标-1", fraction: "1", address: "基础一部", }, { date: "移动互联部", name: "一、合性指标-2", fraction: "2", address: "科技部", }, { date: "财务部", name: "一、合性指标-3", fraction: "3", address: "财务部", }, { date: "总裁办", name: "一、合性指标-5", fraction: "4", address: "总裁办", }, { date: "移动部", name: "一、合性指标-6", fraction: "5", address: "移动部", }, { date: "2016-05-04", name: "已提交", fraction: "6", address: "科技部", }, ], // 分页 pagesize: 5, currentPage: 1, }; }, methods: { // 分页,点击切换 handleCurrentChange(val) { this.currentPage = val; }, },样式
.a { width: 96px; height: 24px; font-size: 16px; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: rgba(0, 0, 0, 1); line-height: 24px; margin-top: 12px; margin-bottom: 24px; font-weight: 700; } //表头换背景颜色 /deep/.el-table th, .el-table tr { background: rgba(244, 245, 247, 1); } .pag { margin-top: 24px; } //分页靠右 .el-pagination { float: right; } //表格铺满 /deep/.el-table__header { width: 100% !important; table-layout: fixed; } /deep/.el-table__body { width: 100% !important; }