1.固定列后高度变化问题
如下图在设置fixed后出现图二问题
图一
图二
2.固定表头之后进行列设置，高度变化问题
如下图
首先可以在表格外面套一个盒子，高度设置为外面盒子的100%（可以解决一部分问题）
解决方法
可在列设置完成的"确定"按钮，或者是watch方法出，或者是数据获取完成后过 $nextTick()操作对应表格dom，并使用elementui表格的doLayout方法实现表格的刷新。（nextTick是在dom渲染完成后调用）
this.$nextTick(()=>{
this.$refs.multipleTable.doLayout()
})
设置列组件代码
<template>
<div>
<!-- 列设置 -->
<el-dialog
v-if="dialogVisible"
title="列设置"
:visible.sync="dialogVisible"
width="30%"
:close-on-click-modal="false"
:show-close="false"
style="border-radius:10px;"
>
<div>
<el-table
ref="multipleTable"
:data="listset.filter(item => item.show !== false)"
style="width: 100%"
height="500"
border
@selection-change="handleSelectionChange"
>
<el-table-column prop="value" align="center" width="80px" />
<el-table-column prop="value1" label="列名称" align="center" />
<el-table-column
label-class-name="DisabledSelection"
width="80px"
type="selection"
header-align="center"
align="center"
/>
</el-table>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="plain" @click="Cancel()">取 消</el-button>
<el-button type="info" @click="Reset()">重置</el-button>
<el-button type="primary" @click="Submet()">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'Columnsetup',
props: {
visible: {
type: Boolean,
default: false
},
listset: {
type: Array,
default: () => []
}
},
data() {
return {
multipleSelection: []
}
},
computed: {
dialogVisible: {
get() {
console.log(this.visible,'get this.visible');
return this.visible
},
set(val) {
// 当visible改变的时候，触发父组件的 updateVisible方法，在该方法中更改传入子组件的 centerDialogVisible的值
console.log(this.visible,val,'set this.visible');
this.$emit('updateVisible', val)
}
}
},
watch: {
dialogVisible: {
handler(newName, oldName) {
if (newName) {
this.$nextTick(() => {
this.columnsetup()
})
}
},
immediate: true
}
},
methods: {
Cancel() {
this.$emit('cancelPopupData')
},
Reset() {
this.$emit('resetPopupData')
this.$nextTick(() => {
this.columnsetup()
})
},
Submet() {
this.$emit('submitPopupData', this.multipleSelection)
},
handleSelectionChange(val) {
this.multipleSelection = val
},
columnsetup() {
this.listset.forEach(item => {
if (item.act) {
this.$refs.multipleTable.toggleRowSelection(item, true)
}
})
}
}
}
</script>
<style scoped>
.el-table /deep/.DisabledSelection .cell .el-checkbox__inner{
margin-left: -30px;
position:relative;
}
.el-table /deep/.DisabledSelection .cell:before{
content:"全选";
position:absolute;
right:11px;
}
</style>
页面引入
<template>
<div class="lee-table-box">
<el-table size="mini" id="equipment-table-list" ref="multipleTable" v-loading="loading"
element-loading-text="数据加载中" :data="tableData" fixed height="100%" style="width: 100%"
:row-class-name="tableRowClassName">
<el-table-column fixed :render-header="renderHeader" align="center" min-width="50" height="100">
<template slot-scope="scope">
{{ scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column fixed v-if="Listset[0].act" :key="Listset[0].value" prop="stnm" show-overflow-tooltip
label="设备编号" width="100" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text" @click="handleSee(scope.row, 2)">{{
scope.row.eqcd }}</el-button>
</template>
</el-table-column>
<el-table-column prop="eqnm" label="设备名称" v-if="Listset[1].act" :key="Listset[1].value"
show-overflow-tooltip>
</el-table-column>
<el-table-column prop="speci" label="规格型号" v-if="Listset[2].act" :key="Listset[2].value"
show-overflow-tooltip>
</el-table-column>
<el-table-column prop="parent_name" label="勘测局" v-if="Listset[3].act" :key="Listset[3].value"
show-overflow-tooltip>
</el-table-column>
<el-table-column prop="orgnm" label="勘测分局" v-if="Listset[4].act" :key="Listset[4].value"
show-overflow-tooltip>
</el-table-column>
<el-table-column prop="chargepernm" label="负责人" v-if="Listset[5].act" :key="Listset[5].value"
show-overflow-tooltip>
</el-table-column>
<el-table-column prop="verperiod" label="检定周期(月)" v-if="Listset[6].act" :key="Listset[6].value" min-width="100"
show-overflow-tooltip>
</el-table-column>
<el-table-column prop="verdate" label="检定日期" v-if="Listset[7].act" :key="Listset[7].value"
show-overflow-tooltip>
</el-table-column>
<el-table-column prop="validity" label="有效期" v-if="Listset[8].act" :key="Listset[8].value"
show-overflow-tooltip>
</el-table-column>
<el-table-column prop="verresult" label="检定结果" v-if="Listset[9].act" :key="Listset[9].value"
show-overflow-tooltip>
</el-table-column>
<el-table-column prop="us_st_name" label="所属测站" v-if="Listset[10].act" :key="Listset[10].value"
show-overflow-tooltip>
</el-table-column>
<el-table-column label="操作" min-width="200" show-overflow-tooltip align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button v-if="devflag == 1 || scope.row.chargeper == userId" :disabled="userId != scope.row.chargeper"
size="mini" type="text" icon="el-icon-edit" @click="handleModify(scope.row, 1)">修改</el-button>
<el-button size="mini" type="text" icon="el-icon-document-checked"
@click="openModal(scope.row)">检定结果</el-button>
<el-button v-if="devflag == 1" size="mini" type="text" icon="el-icon-delete"
@click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination style="padding: 10px 0" @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page.sync="formsearch.start" :page-sizes="[10, 15, 20, 30]" :page-size="formsearch.limit"
layout="total,prev,sizes, pager, next, jumper" :total="totalCount"></el-pagination>
</div>
</div>
<Columnsetup :visible.sync="dialogVisible" :listset="Listset" @updateVisible="updateVisible"
@cancelPopupData="cancelPopupData" @resetPopupData="resetPopupData" @submitPopupData="submitPopupData" />
</div>
</template>
<script>
import Columnsetup from "@/components/Columnsetup"
export default {
name: 'applist',
data() {
return {
defaultTableHeaderList: [
{
act: 1,
value: 1,
value1: '设备编号'
},
{
act: 1,
value: 2,
value1: '设备名称'
},{
act: 1,
value: 3,
value1: '规格型号'
},{
act: 1,
value: 4,
value1: '勘测局'
},{
act: 1,
value: 5,
value1: '勘测分局'
},{
act: 1,
value: 6,
value1: '负责人'
},{
act: 1,
value: 7,
value1: '检定周期(月)'
},{
act: 1,
value: 8,
value1: '检定日期'
},{
act: 1,
value: 9,
value1: '有效期'
},{
act: 1,
value: 10,
value1: '检定结果'
},{
act: 1,
value: 11,
value1: '所属测站'
}
],
Listset: [],//列设置表头
dialogVisible: false, // 弹框的出现与否
}
},
components: {
Columnsetup
},
created(){
let ListsetType = Object.prototype.toString.call(JSON.parse(localStorage.getItem('equiverifyList'))).slice(8, -1)
if(ListsetType === 'Null') {
this.Listset = this.defaultTableHeaderList
console.log('this.Listset', this.Listset)
} else {
this.Listset = JSON.parse(localStorage.getItem('equiverifyList'))
}
},
methods: {
// 列设置
cancelPopupData() {
this.dialogVisible = false
},
updateVisible(val) {
this.dialogVisible = val
},
resetPopupData() {
this.Listset = JSON.parse(JSON.stringify(this.defaultTableHeaderList))
this.$nextTick(() => {
this.$refs.multipleTable.doLayout()
})
},
submitPopupData(val) {
this.Listset.forEach((item) => {
if (val.indexOf(item) > -1) {
item.act = 1
} else {
item.act = 0
}
})
localStorage.setItem('equiverifyList', JSON.stringify(this.Listset))
this.dialogVisible = false
this.$nextTick(() => {
this.$refs.multipleTable.doLayout()
})
// this.$router.go(0)
},
columnsetup() {
this.dialogVisible = true
},
// table列表展示
renderHeader() {
return (
<div >
<i class='el-icon-s-tools setListBtn' style='font-size: 20px;' onClick={this.columnsetup}></i>
</div>
)
}, }
