1
2
3
columnSetting // 是否显示列设置按钮
name="TtableColumnSet" // 区分储存本地表头数据（保证其唯一性）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<template>
  <el-dropdown trigger="click">
    <el-button icon="Setting" size="default">列设置</el-button>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item>
          <span class="title">列设置</span>
          <Draggable class="t_table_column_setting_dropdown" v-model="state.columnSet" item-key="prop">
            <template #item="{element,index}">
              <el-checkbox :checked="!element.hidden" @click.native.stop :disabled="element.checkBoxDisabled"
                @change="checked => checkChanged(checked, index)">
                {{element.label}}
              </el-checkbox>
            </template>
          </Draggable>
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>
<script lang="ts">
export default {
  name: 'ColumnSet'
}
</script>
<script setup lang="ts">
import Draggable from 'vuedraggable'
import { watch, onMounted, reactive } from 'vue'
const props = defineProps({
  columns: {
    type: Array,
    default: () => []
  },
  title: {
    type: String,
    default: ''
  },
  name: {
    type: String,
    default: ''
  }
})
// 初始化
const initColumnSet = () => {
  const columnSet = props.columns.map((col: any, index) => ({
    label: col.label,
    prop: col.prop,
    hidden: false,
    checkBoxDisabled: false
  }))
  return columnSet
}
// 获取缓存数据
const getColumnSetCache = () => {
  const value = localStorage.getItem(`t-ui-plus:TTable.columnSet-${props.name || props.title}`)
  return value ? JSON.parse(value) : initColumnSet()
}
// 抛出事件
const emits = defineEmits(['columnSetting'])
const state: any = reactive({
  columnSet: []
})
onMounted(() => {
  state.columnSet = getColumnSetCache()
  // console.log('onMounted', state.columnSet)
  emits('columnSetting', state.columnSet)
})
watch(
  () => state.columnSet,
  (val) => {
    emits('columnSetting', val)
    // console.log(3333, val)
    localStorage.setItem(`t-ui-plus:TTable.columnSet-${props.name || props.title}`, JSON.stringify(val))
  },
  { deep: true }
)
// checkbox改变选中状态
const checkChanged = (checked, index) => {
  state.columnSet[index].hidden = !checked
  let obj: any = {}
  state.columnSet.map(val => {
    val.hidden in obj || (obj[val.hidden] = [])
    obj[val.hidden].push(val.hidden)
  })
  if (obj.false.length < 2) {
    state.columnSet.map((val, key) => {
      if (!val.hidden) {
        state.columnSet[key].checkBoxDisabled = true
      }
    })
  } else {
    state.columnSet.map((val, key) => {
      if (!val.hidden) {
        state.columnSet[key].checkBoxDisabled = false
      }
    })
  }
}

</script>
<style lang="scss">
.el-dropdown-menu {
  padding: 10px;
  font-size: 14px;
  .el-dropdown-menu__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    .title {
      font-weight: bold;
      margin-bottom: 5px;
    }
    .t_table_column_setting_dropdown {
      display: flex;
      flex-direction: column;
      max-height: 300px;
      overflow-y: auto;
      .el-checkbox {
        .el-checkbox__input.is-checked+.el-checkbox__label {
          color: #262626;
        }
      }
    }
  }
}
</style>

1
2
3
4
 npm i -S vuedraggable@next  
 & 
 yarn add vuedraggable@next