hideCellMenus.js 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. const HideCellMenus = {
  2. template: `
  3. <a-dropdown v-model="visibleMenu" @click="visibleMenu=true">
  4. <a-menu slot="overlay">
  5. <a-menu-item v-for="item in list" :key="item.key">
  6. <a-checkbox :checked="item.checked" @change="e=>onHideKeyChange(e.target.checked,item.key)">
  7. {{ item.title }}
  8. </a-checkbox>
  9. </a-menu-item>
  10. </a-menu>
  11. <a-button :size="size" :id="id"> {{placeholder}} <a-icon type="down" /> </a-button>
  12. </a-dropdown>
  13. `,
  14. props: {
  15. defHiddenKes: {
  16. type: Array,
  17. defatut: function(){
  18. return []
  19. }
  20. },
  21. id: {
  22. type: String,
  23. default: 'hideCellMenus'
  24. },
  25. placeholder: {
  26. type: String,
  27. default: '显示更多列'
  28. },
  29. size: {
  30. type: String,
  31. default: 'default'
  32. },
  33. },
  34. data() {
  35. return {
  36. visibleMenu: false,
  37. list: this.defHiddenKes.filter(item=> !item.disabled)
  38. };
  39. },
  40. mounted() {
  41. },
  42. watch: {
  43. defHiddenKes: {
  44. handler: function (val) {
  45. this.list = val.filter(item=> !item.disabled)
  46. },
  47. immediate: true
  48. },
  49. list: {
  50. handler: function (val) {
  51. const hidekey = this.list.filter(item => !item.checked).map(item => item.key)
  52. this.$emit('change', hidekey);
  53. this.$emit('input', hidekey);
  54. },
  55. immediate: true
  56. }
  57. },
  58. methods: {
  59. onHideKeyChange(checked, key) {
  60. const row = this.list.find(item => item.key == key)
  61. row.checked = checked
  62. this.list.splice()
  63. }
  64. },
  65. };
  66. export default HideCellMenus