<template>
<div class="container">
<el-card>
<div class="btn">
<el-popover placement="right" title="列筛选" trigger="click" width="130">
<el-checkbox-group v-model="checkedColumns" size="mini">
<el-checkbox v-for="item in checkBoxGroup" :key="item" :label="item" :value="item"></el-checkbox>
</el-checkbox-group>
<el-button slot="reference" type="primary" size="small" plain><i class="el-icon-arrow-down el-icon-menu" /> 列表项展示筛选</el-button>
</el-popover>
</div>
<el-table :data="tableData" stripe border row-key="id" align="left" style=" 100%;text-align:center">
<el-table-column v-for="(item, index) in dropCol" :key="`col_${index}`" v-if="dropCol[index].istrue" :prop="dropCol[index].prop" :label="item.label" :width="item.width"> </el-table-column>
</el-table>
</el-card>
</div>
</template>
<script>
// 安装并引入sortablejs 排序用的
import Sortable from 'sortablejs'
export default {
data() {
return {
//表格表头
dropCol: [
{
'160',
label: '订单编号',
istrue: true,
prop: 'num1'
},
{
'180',
label: '退款单号',
istrue: true,
prop: 'num2'
},
{
label: '订单归属',
istrue: true,
prop: 'num3'
},
{
label: '销售渠道',
istrue: true,
prop: 'num4'
},
{
label: '退款渠道',
istrue: true,
prop: 'num5'
},
{
label: '退款时间',
istrue: true,
prop: 'num6'
},
{
'160',
label: '订单数量',
istrue: true,
prop: 'num7'
},
{
label: '订单金额',
istrue: true,
prop: 'num8'
}
],
//表格表头
col: [
{
'160',
label: '订单编号',
istrue: true,
prop: 'num1'
},
{
'180',
label: '退款单号',
istrue: true,
prop: 'num2'
},
{
label: '订单归属',
istrue: true,
prop: 'num3'
},
{
label: '销售渠道',
istrue: true,
prop: 'num4'
},
{
label: '退款渠道',
istrue: true,
prop: 'num5'
},
{
label: '退款时间',
istrue: true,
prop: 'num6'
},
{
'160',
label: '订单数量',
istrue: true,
prop: 'num7'
},
{
label: '订单金额',
istrue: true,
prop: 'num8'
}
],
checkBoxGroup: [],
checkedColumns: [],
//表格 行 数据
tableData: [
{
id: '1',
num1: '8975972309-84085',
num2: 'TK_8475970984099',
num3: '荣誉小区',
num4: '线上',
num5: '线上',
num6: '2021-09-09 12:34:13',
num7: '50',
num8: '32.00'
},
{
id: '1',
num1: '8975972309-84085',
num2: 'TK_8475970984099',
num3: '荣誉小区',
num4: '线上',
num5: '线上',
num6: '2021-09-09 12:34:13',
num7: '50',
num8: '32.00'
},
{
id: '1',
num1: '8975972309-84085',
num2: 'TK_8475970984099',
num3: '荣誉小区',
num4: '线上',
num5: '线上',
num6: '2021-09-09 12:34:13',
num7: '50',
num8: '32.00'
},
{
id: '1',
num1: '8975972309-84085',
num2: 'TK_8475970984099',
num3: '荣誉小区',
num4: '线上',
num5: '线上',
num6: '2021-09-09 12:34:13',
num7: '50',
num8: '32.00'
},
{
id: '1',
num1: '8975972309-84085',
num2: 'TK_8475970984099',
num3: '荣誉小区',
num4: '线上',
num5: '线上',
num6: '2021-09-09 12:34:13',
num7: '50',
num8: '32.00'
},
{
id: '1',
num1: '8975972309-84085',
num2: 'TK_8475970984099',
num3: '荣誉小区',
num4: '线上',
num5: '线上',
num6: '2021-09-09 12:34:13',
num7: '50',
num8: '32.00'
},
{
id: '1',
num1: '8975972309-84085',
num2: 'TK_8475970984099',
num3: '荣誉小区',
num4: '线上',
num5: '线上',
num6: '2021-09-09 12:34:13',
num7: '50',
num8: '32.00'
},
{
id: '1',
num1: '8975972309-84085',
num2: 'TK_8475970984099',
num3: '荣誉小区',
num4: '线上',
num5: '线上',
num6: '2021-09-09 12:34:13',
num7: '50',
num8: '32.00'
},
{
id: '1',
num1: '8975972309-84085',
num2: 'TK_8475970984099',
num3: '荣誉小区',
num4: '线上',
num5: '线上',
num6: '2021-09-09 12:34:13',
num7: '50',
num8: '32.00',
num14: '5.00'
},
{
id: '1',
num1: '8975972309-84085',
num2: 'TK_8475970984099',
num3: '荣誉小区',
num4: '线上',
num5: '线上',
num6: '2021-09-09 12:34:13',
num7: '50',
num8: '32.00'
}
]
}
},
created() {
// 列筛选
this.dropCol.forEach((item, index) => {
this.checkBoxGroup.push(item.label)
this.checkedColumns.push(item.label)
})
this.checkedColumns = this.checkedColumns
let UnData = localStorage.getItem(this.colTable)
UnData = JSON.parse(UnData)
if (UnData != null) {
this.checkedColumns = this.checkedColumns.filter(item => {
return !UnData.includes(item)
})
}
},
// 监听列隐藏
watch: {
checkedColumns(val, value) {
let arr = this.checkBoxGroup.filter(i => !val.includes(i)) // 未选中
localStorage.setItem(this.colTable, JSON.stringify(arr))
this.dropCol.filter(i => {
if (arr.indexOf(i.label) != -1) {
i.istrue = false
} else {
i.istrue = true
}
})
}
},
mounted() {
// 阻止默认行为
document.body.ondrop = function(event) {
event.preventDefault()
event.stopPropagation()
}
this.columnDrop()
},
methods: {
//列拖拽
columnDrop() {
const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
this.sortable = Sortable.create(wrapperTr, {
animation: 180,
delay: 0,
// onEnd拖拽结束后的回调
onEnd: evt => {
const oldItem = this.dropCol[evt.oldIndex]
this.dropCol.splice(evt.oldIndex, 1)
this.dropCol.splice(evt.newIndex, 0, oldItem)
}
})
}
}
}
</script>
<style lang="less" scoped></style>
