12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667 |
- const HideCellMenus = {
- template: `
- <a-dropdown v-model="visibleMenu" @click="visibleMenu=true">
- <a-menu slot="overlay">
- <a-menu-item v-for="item in list" :key="item.key">
- <a-checkbox :checked="item.checked" @change="e=>onHideKeyChange(e.target.checked,item.key)">
- {{ item.title }}
- </a-checkbox>
- </a-menu-item>
- </a-menu>
- <a-button :size="size" :id="id"> {{placeholder}} <a-icon type="down" /> </a-button>
- </a-dropdown>
- `,
- props: {
- defHiddenKes: {
- type: Array,
- defatut: function(){
- return []
- }
- },
- id: {
- type: String,
- default: 'hideCellMenus'
- },
- placeholder: {
- type: String,
- default: '显示更多列'
- },
- size: {
- type: String,
- default: 'default'
- },
- },
- data() {
- return {
- visibleMenu: false,
- list: this.defHiddenKes.filter(item=> !item.disabled)
- };
- },
- mounted() {
- },
- watch: {
- defHiddenKes: {
- handler: function (val) {
- this.list = val.filter(item=> !item.disabled)
- },
- immediate: true
- },
- list: {
- handler: function (val) {
- const hidekey = this.list.filter(item => !item.checked).map(item => item.key)
- this.$emit('change', hidekey);
- this.$emit('input', hidekey);
- },
- immediate: true
- }
- },
- methods: {
- onHideKeyChange(checked, key) {
- const row = this.list.find(item => item.key == key)
- row.checked = checked
- this.list.splice()
- }
- },
- };
- export default HideCellMenus
|