加固定列 fixed
滚动条在fixed列下不能拖动
增加合计行:show-summary
将滚动条固定在合计行底部
由于不同浏览器滚动条高度不同,使用css判断浏览器类型,调用不同的样式
/* Target Safari and Chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {
/*table {*/
/*color: blue;*/
/*}*/
.el-table--scrollable-x {
.el-table__fixed {
margin-bottom: 8px;
}
}
}
/* Target IE 10 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/*table {*/
/*color: red;*/
/*}*/
.el-table--scrollable-x {
.el-table__fixed {
margin-bottom: 15px;
}
}
}
完整代码
<template>
<div id="formalResNegHeadman" class="content_bgibox">
<!--评-->
<div class="setup_bigbox">
<div class="proinfobox">
<span class="line_bigbox"></span>
<span class="title_bigbox">标题</span>
</div>
</div>
<div class="score_bigbox" >
<el-table
ref="somTable"
:data="tableDataScore"
show-summary
border
style="width: 100%" max-height="600">
<el-table-column
type="index"
label="序号"
width="50"
fixed
align="center">
</el-table-column>
<el-table-column
prop="itemName"
label="因素"
width="150"
fixed
show-overflow-tooltip
align="left">
</el-table-column>
<el-table-column
prop="itemDesc"
label="标准"
width="200"
fixed
show-overflow-tooltip
align="left">
</el-table-column>
<el-table-column
prop="lessItemScore"
label="最低分"
width="70"
fixed
align="center">
</el-table-column>
<el-table-column
prop="itemScore"
label="最高分"
width="70"
fixed
align="center">
</el-table-column>
<template v-for="(item,key) in tabScoreTitle" >
<el-table-column :prop="item.column_name"
width="200"
:label="item.column_comment"
:key="key"
align="left">
<template slot-scope="scope">
<el-input v-model="scope.row[item.column_name]"
size="mini"
type="text"
@change="handleScore(scope)"
style="font-size: 15px;" :disabled="subStatus">
</el-input>
</template>
</el-table-column>
</template>
</el-table>
<!--提交按钮-->
<div class="sub_btnbigbox">
<el-button type="primary" class="sub_btn" @click="submitBtn" v-if="!orderStatus">提 交</el-button>
<el-button type="primary" class="sub_btn" disabled v-else>已提交</el-button>
</div>
<!--提交按钮-->
</div>
<!--评分-->
</div>
</template>
<script>
import { consultingReview } from '@/api'
export default {
data () {
return {
pageSize: 1000, // 每页展示条数
pageNo: 0,
// 表头动态获取
tabScoreTitle: [],
// 每个评审项目的不同数据
tableDataScore: [],
checkList: [], // 评审数据
orderStatus: false, // 命令状态
reviewType: '',
subStatus: false, // 是否可以输入
scaleDecimal: this.$store.getters.authUser.scaleDecimal
}
},
activated () {
this.doLayout()
},
methods: {
doLayout () {
this.$nextTick(() => {
this.$refs.somTable.doLayout()
})
},
handleScore (scope) { // 录入分数
let tenderId = scope.column.property // 投标人id
let id = 0
// let itemNameId = scope.row.itemNameId
let lessItemScore = scope.row.lessItemScore
let score = scope.row[tenderId]
let totalScore = scope.row.itemScore
// 评分小数位
let flagRex = new RegExp('^0$|^0$|^(-)?[1-9]\\d{0,15}$|^(-)?[1-9]\\d{0,15}\\.{1}\\d{1,' + this.scaleDecimal + '}$|^(-)?0\\.{1}\\d{1,' + this.scaleDecimal + '}$')
if (flagRex.test(score)) {
if (score > totalScore) {
this.$message({
type: 'warning',
message: '不能超过满分'
})
return
}
if (lessItemScore > score) {
this.$message({
type: 'warning',
message: '不能低于最低分'
})
return
}
this.checkList.map((item) => {
if (item.checkItemId === scope.row.itemNameId && item.tenderId.toString() === scope.column.property) {
id = item.objectId
}
})
let params = {
checkScore: score,
objectId: id
}
consultingReview.preservationUnqualified(params).then((res) => {
this.checkList.map((its) => {
if (its.objectId === params.objectId) {
its.checkScore = params.checkScore
}
})
})
} else {
this.$message({
type: 'warning',
message: '得分不能超过' + this.scaleDecimal + '位小数'
})
}
},
// 点击切换
chooseAddr (index) {
this.addrSelected = index
},
reviewResultsLists () { // 初始化数据
let url = {
pageNo: this.pageNo,
pageSize: this.pageSize,
checkType: this.reviewType
}
consultingReview.reviewResultsList2(url).then((res) => {
this.tabScoreTitle = res.data.ResultTitle
this.tableDataScore = res.data.ResultList
this.checkList = res.data.checkList
this.orderStatus = res.data.isHide === '1'
this.subStatus = res.data.isHide === '1'
})
this.doLayout()
},
checkSample () {
let reResult = false
this.checkList.map((its) => {
if (its.checkScore === null || its.checkScore === '') {
console.log('未录入记录', its)
reResult = true
}
})
return reResult
},
submitBtn () {
let url = {
checkTypeId: this.reviewType
}
let backV = this.checkSample()
if (!backV) {
consultingReview.rationalitySubmit(url).then(() => {
this.reviewResultsLists()
})
} else {
this.$message({
type: 'warning',
message: '还未全部录入,请继续录入'
})
}
},
handleType () {
this.reviewType = this.$route.params.type
},
init () {
this.handleType()
this.reviewResultsLists()
}
},
mounted () {
this.init()
const a = this.$refs.somTable.$refs.footerWrapper
a.addEventListener('scroll', () => {
const left = a.scrollLeft
this.$refs.somTable.$refs.bodyWrapper.scrollLeft = left
})
}
}
</script>
<style lang="less">
#formalResNegHeadman{
margin-top: 20px;
.score_bigbox{
padding:20px;
}
.el-table--scrollable-x .el-table__body-wrapper {
overflow-x: hidden !important;
}
.el-table__body-wrapper {
overflow-x: hidden !important;
}
.el-table__footer-wrapper {
overflow-x: auto !important;
}
/*.el-table__fixed {*/
/*margin-bottom: 14px;*/
/*}*/
/* Target Safari and Chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {
/*table {*/
/*color: blue;*/
/*}*/
.el-table--scrollable-x {
.el-table__fixed {
margin-bottom: 8px;
}
}
}
/* Target IE 10 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/*table {*/
/*color: red;*/
/*}*/
.el-table--scrollable-x {
.el-table__fixed {
margin-bottom: 15px;
}
}
}
}
</style>
感谢灵感来源: