实现表头可以拖拽排序和控制表头显隐功能的组件
- 实现效果
- html部分
<div class="lui-container">
<el-table
ref="tableList"
v-loading="tableListLoading"
:data="tableList"
tooltip-effect="dark"
border
fit
width="100"
>
<el-table-column
type="selection"
width="55"
/>
<template v-for="(item,index) in columns">
<el-table-column v-if="item.isShow" :key="index" :label="item.text" :prop="item.prop" min-width="180px" show-overflow-tooltip>
<template slot-scope="scope">
<span v-if="['createTime','updateTime'].includes(scope.column.property)">
{{ dateFormat(scope.row[scope.column.property]) }} // 处理内容展示格式
</span>
<span v-else>
{{ scope.row[scope.column.property] }}
</span>
</template>
</el-table-column>
</template>
<el-table-column
fixed="right"
width="150px"
align="center"
>
<template slot="header">
<el-popover placement="bottom" title="筛选列" trigger="click">
<span slot="reference">操作<i class="el-icon-arrow-down" style="font-weight: bold;" /></span>
<div>
<el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
<el-scrollbar style="height: 200px" class="table-box-scroll">
<Container lock-axis="y" @drag-end="tableUpdate" @drop="onDrop">
<Draggable v-for="column in columns" :key="column.text">
<el-checkbox :value="column.isShow" :label="column.text" :disabled="defaultList.includes(column.prop)" @change="handleCheckedColumnChange(column.isShow,column.prop)" />
</Draggable>
</Container>
</el-scrollbar>
</div>
</el-popover>
</template>
<template slot-scope="scope">
<el-row>
<el-col :span="8">
<el-tooltip class="item" effect="dark" :content="$t('global.common-000037') /**国际化: 编辑 */"
placement="top-start">
<el-button
type="text"
size="mini"
icon="el-icon-edit"
@click="editRow({activeName, type: 'edit', data: scope.row})"
/>
</el-tooltip>
</el-col>
</el-row>
</template>
</el-table-column>
</el-table>
</div>
- js部分
import { Container, Draggable } from 'vue-smooth-dnd'
components: {
Container,
Draggable
}
data() {
return {
checkAll: false,
defaultList: ['spCode', 'unCode', 'priority', 'operation'],
columns: [
{ prop: 'spCode', isShow: true, text: this.$t('global.dockingManager-000001') },
{ prop: 'unCode', isShow: true, text: this.$t('global.dockingManager-000675') },
{ prop: 'operation', isShow: true, text: this.$t('global.dockingManager-000664') },
{ prop: 'priority', isShow: true, text: this.$t('global.dockingManager-000683') },
{ prop: 'createTime', isShow: false, text: this.$t('global.dockingManager-000010') },
{ prop: 'createUser', isShow: false, text: this.$t('global.dockingManager-000009') },
{ prop: 'updateTime', isShow: false, text: this.$t('global.dockingManager-000012') },
{ prop: 'updateUser', isShow: false, text: this.$t('global.dockingManager-000011') },
],
}
}
mounted() {
this.allCheckedFun()
},
methods:{
onDrop(dropResult) {
this.columns = this.applyDrag(this.columns, dropResult)
localStorage.setItem('dangerousTableColumns', JSON.stringify(this.columns))
this.$refs.tableList.doLayout() // 从心加载表格布局
},
applyDrag(arr, dragResult) {
const { removedIndex, addedIndex, payload } = dragResult
console.log(removedIndex, addedIndex, payload)
if (removedIndex === null && addedIndex === null) return arr
const result = [...arr]
let itemToAdd = payload
if (removedIndex !== null) {
itemToAdd = result.splice(removedIndex, 1)[0]
}
if (addedIndex !== null) {
result.splice(addedIndex, 0, itemToAdd)
}
return result
},
allCheckedFun() {
const tableColumns = localStorage.getItem('dangerousTableColumns')
if (tableColumns) {
this.columns = JSON.parse(tableColumns)
this.$refs.tableList.doLayout()
}
const status = this.columns.map((item) => { return item.isShow })
this.checkAll = !status.includes(false)
},
handleCheckAllChange(val) {
if (val) {
this.columns.map((item) => {
item.isShow = true
})
} else {
this.columns.map((item) => {
if (this.defaultList.includes(item.prop)) {
item.isShow = true
} else {
item.isShow = false
}
})
}
localStorage.setItem('dangerousTableColumns', JSON.stringify(this.columns))
this.$refs.tableList.doLayout()
},
handleCheckedColumnChange(tar, val) {
this.columns.map((item) => {
if (item.prop === val) {
item.isShow = !tar
}
})
const status = this.columns.map((item) => { return item.isShow })
this.checkAll = !status.includes(false)
localStorage.setItem('dangerousTableColumns', JSON.stringify(this.columns))
this.$refs.tableList.doLayout()
},
tableUpdate() {
console.log(this.columns)
},
}