element ui vue 表格每一列动态锁定与解锁,点击图标切换锁定与解锁
- 在表头增加属性fixed,动态赋值ture或flase(锁定与解锁)
<el-table-column prop="num" label="序号" width="80" :fixed="fixed1">
</el-table-column>
- 在data里定义
export default {
data() {
return {
fixed: false,
}
}
}
3.在表头里插入图标,注意我这里用的图片,路径要用require,否则图片加载不出来,这里图标路径可以换成你的路径
<template slot="header">
<div class="custom-header" style="position: relative;">
序号
<img style="width: 20px; height: 20px;position: absolute;right: 0;" :src="fixed1 ? require('../../../assets/icons/close.png') : require('../../../assets/icons/open.png')" @click="toggleLock" />
</div>
</template>
4.点击图标事件
methods: {
toggleLock() {
this.fixed = !this.fixed
}
}
5.效果图
5.完整代码
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" stripe >
<el-table-column prop="num" label="序号" width="80" :fixed="fixed1">
<template slot="header">
<div class="custom-header" style="position: relative;">
序号
<img style="width: 20px; height: 20px;position: absolute;right: 0;" :src="fixed1 ? require('../../../assets/icons/close.png') : require('../../../assets/icons/open.png')" @click="toggleLock(1)" />
</div>
</template>
</el-table-column>
</el-table>
<script>
export default {
name: "Request",
data() {
return {
fixed: false,
tableData: [{num: '1',},{num: '2',}],
}
},
methods: {
toggleLock {
this.fixed = !this.fixed
}
}
}
</script>