Foreword:
When writing a project, there is a requirement that when the scroll bar of the el-table slides, the visible area will be fixed to the left if there is no such column. From the official website of elementUi, the code for fixing one column of the el-table is as follows:
fixed is the main logo,
and the head is fixed to set the height of the table
<template>
<el-table
:data="tableData"
style="width: 100%"
height="250">
<el-table-column
fixed
prop="date"
label="日期"
width="150">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column
prop="province"
label="省份"
width="120">
</el-table-column>
<el-table-column
prop="city"
label="市区"
width="120">
</el-table-column>
<el-table-column
prop="address"
label="地址"
width="300">
</el-table-column>
<el-table-column
prop="zip"
label="邮编"
width="120">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-08',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-06',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-07',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}]
}
}
}
</script>
need
If the horizontal scroll bar slides over the picture column, the picture column is fixed to the left, otherwise it is not fixed
Horizontal scroll bar, slide over the picture column, the picture column is fixed
We still need to write fixed in html, and fixed can receive a boolean value, which is exactly what we need
<el-table-column
prop="image"
label="图片"
:fixed='imgFixFlag'>
</el-table-column>
**Question:** How to get the scroll event of the scroll bar?
Using ref in the table, you can get this.$refs.tableList.bodyWrapper scroll bar, monitor the scroll bar, you can get the scrolling position, and the final critical position can be set according to your own
The complete code is as follows:
<template>
<el-table :data="manyFormValidate"
size="small"
style="width: 90%;"
ref='tableList'>
<el-table-column
prop="id"
label="id"
>
</el-table-column>
<el-table-column
prop="属性"
label="属性"
>
</el-table-column>
<el-table-column
prop="image"
label="图片"
:fixed='imgFixFlag'>
</el-table-column>
<el-table-column
prop="image"
label="图片"
:fixed='imgFixFlag'>
</el-table-column>
<el-table-column
prop="..."
label="..."
>
</el-table-column>
<!-- 省略更多的el-table-column-->
</el-table>
</template>
<script>
export default {
data () {
return {
imgFixFlag:false,
}
},
mounted(){
//一定注意放到mounted中，即table已经渲染了
this.$nextTick(() => {
this.$refs.tableList.bodyWrapper.addEventListener(
'scroll',
() => {
// 此处的600可根据自己的需求更改
if (this.$refs.tableList.bodyWrapper.scrollLeft >= 600) {
this.imgFix = true
} else {
this.imgFix = false
}
},
false
)
})
},
methods:{
}
}
</script>
ps: I really don’t know how to say
it. When there are fixed columns, there will be wrong rows Layout, when the Table or its ancestor elements are switched from hiding to displaying, this method may need to be referenced, but our fixed column does not need to display or hide a certain column. I looked through the solutions of the great gods, and referred to the solution of a certain great god:
doLayout
el-table-columnAdd width directly :
1. Use the fixed='right' fixed operation column to specify the width attribute. Be careful to add px, otherwise it is still not easy to use. 2.
The columns adjacent to the fixed operation column do not specify width, and other columns are Specify the width, (ps: because my table header is rendered in this example, so I added a fixed width to each column, which is still valid)
Result:
The code is as follows:
<el-table-column
:width="item.title==='图片'&&imgFix?'100px':'200px'"
:fixed='imgFixFlag'>
</el-table-column>