• vue管理系统列表行按钮过多, 封装更多组件

    管理系统table列表操作列, 随着按钮的数量越来越多会不断加宽操作列, 感觉很不好, 对此我封装了这个自动把多余的按钮放到更多菜单下

    MoreOperation/index.vue
    menu组件我这是ant的, 可以自行替换为其他框架的

    2.  
    3. <script>
    4. /**
    5.  * MoreOperation 组件
    6.  * 1. 配置模式
    7.  * 2. slot模式
    8.  * @author chengxg
    9.  * @since 2023-09-15
    10.  */
    11.  
    12. let weekTableMap = new WeakMap()
    13. import OperationItem, { MoreOperationItemProp } from "./OperationItem.vue"
    14.  
    15. // 根据模版创建对象
    16. function createObjByTpl(obj, tpl) {
    17.   let newObj = {}
    18.   for (let f in tpl) {
    19.     if (typeof obj[f] === 'undefined') {
    20.       newObj[f] = tpl[f]
    21.     } else {
    22.       newObj[f] = obj[f]
    23.     }
    24.   }
    25.   return newObj
    26. }
    27. export { OperationItem }
    28.  
    29. export default {
    30.   name: 'MoreOperation',
    31.   comments: {},
    32.   props: {
    33.     // 表格所有数据
    34.     tableData: {
    35.       type: Array,
    36.       default: null
    37.     },
    38.     // 表格行数据
    39.     row: {
    40.       type: Object,
    41.       required: true,
    42.       default: null
    43.     },
    44.  
    45.     // 配置模式 所有的按钮
    46.     btns: {
    47.       type: Array,
    48.       // [MoreOperationItemProp]
    49.       default: null
    50.     },
    51.  
    52.     // 外边的按钮数量
    53.     outerBtnNum: {
    54.       type: Number,
    55.       default: 2
    56.     }
    57.   },
    58.   provide() {
    59.     return {
    60.       'moreOperations': this
    61.     };
    62.   },
    63.   data() {
    64.     return {
    65.       items: []
    66.     }
    67.   },
    68.   computed: {
    69.     activeBtns() {
    70.       let btns = this.btns || this.items || []
    71.       return btns.filter((item) => {
    72.         if (typeof item.disabled === 'function') {
    73.           item.disabled = item.disabled(this.row, item.params)
    74.         }
    75.         if (typeof item.show === 'function') {
    76.           return item.show(this.row, item.params)
    77.         }
    78.         return true
    79.       })
    80.     },
    81.     outerBtns() {
    82.       if (this.activeBtns.length <= this.outerBtnNum + 1) {
    83.         return this.activeBtns
    84.       }
    85.       return this.activeBtns.slice(0, this.outerBtnNum)
    86.     },
    87.     moreBtns() {
    88.       if (this.activeBtns.length <= this.outerBtnNum + 1) {
    89.         return []
    90.       }
    91.       return this.activeBtns.slice(this.outerBtnNum)
    92.     }
    93.   },
    94.   watch: {
    95.  
    96.   },
    97.   created() {
    98.     this.updateSlotBtns()
    99.     this.autoCalcMaxWidth()
    100.     this.$watch(() => {
    101.       return this.row
    102.     }, (newVal, oldVal) => {
    103.       this.$nextTick(() => {
    104.         this.updateSlotBtns()
    105.         this.$nextTick(() => {
    106.           this.autoCalcMaxWidth()
    107.         })
    108.       })
    109.     })
    110.   },
    111.   methods: {
    112.     // 计算当前列最大宽度
    113.     autoCalcMaxWidth() {
    114.       if (!this.row) {
    115.         return
    116.       }
    117.       let width = 0
    118.       for (let item of this.outerBtns) {
    119.         width += item.width
    120.       }
    121.       // more 宽度60
    122.       if (this.moreBtns.length > 1) {
    123.         width += 60
    124.       }
    125.       this.row.btnsMaxWidth = width
    126.       this.calcOperationWidth()
    127.     },
    128.     // 计算表格操作列的最大宽度
    129.     calcOperationWidth() {
    130.       let tableData = this.tableData || this.$parent.tableData
    131.       if (!tableData) {
    132.         return
    133.       }
    134.       if (weekTableMap[tableData]) {
    135.         clearTimeout(weekTableMap[tableData])
    136.       }
    137.       weekTableMap[tableData] = setTimeout(() => {
    138.         let maxWidth = 120;
    139.         for (const row of tableData) {
    140.           if (row.btnsMaxWidth > maxWidth) {
    141.             maxWidth = row.btnsMaxWidth;
    142.           }
    143.         }
    144.         let operatorColumnWidth = maxWidth + 10;
    145.         this.$emit("update:operatorWidth", operatorColumnWidth)
    146.         // 使用vxeTable组件库 自动调整最大操作列 列宽
    147.         if (this.$parent.$parent.recalculate) {
    148.           this.$parent.$parent.recalculate(true)
    149.         }
    150.       }, 10)
    151.     },
    152.  
    153.     clickBtn(item) {
    154.       item.click && item.click(this.row, item.params)
    155.     },
    156.     dropdownMenu(command) {
    157.       let btnItem = this.moreBtns[command.key]
    158.       if (btnItem && typeof btnItem.click === 'function') {
    159.         btnItem.click(this.row, btnItem.params)
    160.       }
    161.     },
    162.  
    163.     updateSlotBtns() {
    164.       if (!this.btns) {
    165.         if (this.$slots.default) {
    166.           this.items = this.$slots.default.filter((item) => {
    167.             if (item && item.componentOptions && item.componentOptions.tag == 'OperationItem') {
    168.               return true
    169.             }
    170.             return false
    171.           }).map((item) => {
    172.             let obj = createObjByTpl(item.componentOptions.propsData, MoreOperationItemProp)
    173.             if (item.componentOptions.propsData.item) {
    174.               Object.assign(obj, item.componentOptions.propsData.item)
    175.             }
    176.             obj.vnode = item
    177.             return obj
    178.           })
    179.         } else {
    180.           this.items = []
    181.         }
    182.       }
    183.     },
    184.  
    185.     slotNode(vnode) {
    186.       return {
    187.         render(h) {
    188.           return vnode;
    189.         }
    190.       }
    191.     },
    192.   },
    193.   mounted() {
    194.  
    195.   }
    196. }
    197. script>
    198.  
    199. <style lang="scss">
    200. .table-operations-group {
    201.   display: flex;
    202.   justify-content: flex-start;
    203.   align-items: center;
    204.  
    205.   .option-btn-wrap {
    206.     display: flex;
    207.     justify-content: flex-start;
    208.     align-items: center;
    209.     cursor: pointer;
    210.     user-select: none;
    211.  
    212.     &::after {
    213.       display: block;
    214.       content: ' ';
    215.       width: 0;
    216.       height: 14px;
    217.       border-left: 1px solid #eeeeee;
    218.       margin: 0 4px;
    219.     }
    220.  
    221.     &:last-child {
    222.       &::after {
    223.         display: none;
    224.       }
    225.     }
    226.  
    227.     &.disabled {
    228.       pointer-events: none;
    229.  
    230.       .my-text-btn {
    231.         cursor: no-drop;
    232.         color: #bfc2cc;
    233.  
    234.         &:active {
    235.           background: none;
    236.         }
    237.       }
    238.     }
    239.   }
    240.  
    241.   .my-text-btn {
    242.     display: inline-flex;
    243.     justify-content: center;
    244.     align-items: center;
    245.     cursor: pointer;
    246.     user-select: none;
    247.     border-radius: 1px;
    248.     padding: 3px 5px;
    249.     height: 30px;
    250.     vertical-align: middle;
    251.  
    252.     font-size: 14px;
    253.     font-weight: 400;
    254.     color: #3471ff;
    255.  
    256.     &:active {
    257.       background: rgba(29, 111, 255, 0.06);
    258.     }
    259.  
    260.     &.disabled {
    261.       cursor: no-drop;
    262.       color: #bfc2cc;
    263.  
    264.       &:active {
    265.         background: none;
    266.       }
    267.     }
    268.  
    269.     .btn-icon {
    270.  
    271.       i,
    272.       &.el-icon,
    273.       &.icon-svg,
    274.       &.svg-icon {
    275.         display: inline-flex;
    276.         justify-content: center;
    277.         align-items: center;
    278.         margin-right: 4px;
    279.         width: 12px;
    280.         height: 12px;
    281.       }
    282.     }
    283.  
    284.     .btn-icon-right {
    285.  
    286.       i,
    287.       &.el-icon,
    288.       &.icon-svg,
    289.       &.svg-icon {
    290.         display: inline-flex;
    291.         justify-content: center;
    292.         align-items: center;
    293.         margin-right: 4px;
    294.         width: 12px;
    295.         height: 12px;
    296.       }
    297.     }
    298.   }
    299. }
    300. style>

    MoreOperation/OperationItem.vue

    使用方法:

    实现了配置模式和slot模式, slot模式支持v-if来控制按钮显示隐藏

    1.             
    2.             <MoreOperation :btns="operationBtns" :row="row" :operatorWidth.sync="operatorColumnWidth">
    3.               <template #del="item">
    4.                 <div class="my-text-btn" style="color:red;">{{ item.name }}div>
    5.               template>
    6.             MoreOperation>
    7.  
    8.             
    9.             <MoreOperation :row="row" :operatorWidth.sync="operatorColumnWidth">
    10.               <OperationItem name="详情" :click="operationBtns[0].click">OperationItem>
    11.               <OperationItem v-if="operationBtns[1].show(row)" :width="80" name="历史记录" :click="operationBtns[1].click">OperationItem>
    12.               <OperationItem v-if="operationBtns[2].show(row)" :width="50" name="删除" :click="operationBtns[2].click">
    13.                 <div class="my-text-btn" style="color:red;">删除div>
    14.               OperationItem>
    15.               <OperationItem :item="operationBtns[3]">OperationItem>
    16.               <OperationItem :item="operationBtns[4]">OperationItem>
    17.               <OperationItem v-if="operationBtns[5].show(row)" :width="50" name="禁用" :click="operationBtns[5].click">OperationItem>
    18.               <OperationItem :item="operationBtns[6]">OperationItem>
    19.             MoreOperation>
    1. import MoreOperation, { OperationItem } from "@/components/MoreOperation/index.vue"
    2.  
    3. export default {
    4.   name: "example",
    5.   components: { MoreOperation, OperationItem },
    6.   data() {
    7.     return {
    8.       loading: false,
    9.       searchForm: {
    10.         name: "",
    11.       },
    12.       page: {
    13.         pageNum: 1,
    14.         pageSize: 20,
    15.         total: 0,
    16.       }, // 分页信息
    17.       tableData: [],
    18.       operatorColumnWidth: 120,
    19.       operationBtns: [{
    20.         name: "详情",
    21.         width: 45,
    22.         params: null,
    23.         show: (row, params) => {
    24.           return Math.random() > 0.1
    25.         },
    26.         click: (row, params) => {
    27.           console.log("click 详情")
    28.         },
    29.         disabled: false,
    30.         customRender: ""
    31.       }, {
    32.         name: "删除",
    33.         width: 45,
    34.         params: null,
    35.         show: (row, params) => {
    36.           return Math.random() > 0.5
    37.         },
    38.         click: (row, params) => {
    39.           console.log("click 删除")
    40.         },
    41.         disabled: false,
    42.         customRender: "del",
    43.       }, {
    44.         name: "历史记录",
    45.         width: 80,
    46.         show: (row) => {
    47.           return Math.random() > 0.8
    48.         },
    49.         click: (row) => {
    50.           console.log("click 历史记录")
    51.         },
    52.       }, {
    53.         name: "修改",
    54.         width: 45,
    55.         show: (row) => {
    56.           return Math.random() > 0.5
    57.         },
    58.         click: (row) => {
    59.           console.log("click 修改")
    60.         },
    61.         disabled: true
    62.       }, {
    63.         name: "撤回",
    64.         width: 45,
    65.         show: (row) => {
    66.           return Math.random() > 0.5
    67.         },
    68.         click: (row) => {
    69.           console.log("click 撤回")
    70.         }
    71.       }, {
    72.         name: "禁用",
    73.         width: 45,
    74.         show: (row) => {
    75.           return Math.random() > 0.5
    76.         },
    77.         click: (row) => {
    78.           console.log("click 禁用")
    79.         }
    80.       }, {
    81.         name: "流程跟踪",
    82.         width: 80,
    83.         show: (row) => {
    84.           return Math.random() > 0.8
    85.         },
    86.         click: (row) => {
    87.           console.log("click 流程跟踪")
    88.         },
    89.         disabled: true
    90.       }],
    91.     };
    92.   },
    93.   created() {
    94.  
    95.   },
    96.   mounted() {
    97.     this.onSearch()
    98.   },
    99.   methods: {
    100.     onSearch(page = {}) {
    101.       if (this.loading) {
    102.         return
    103.       }
    104.  
    105.       let params = {
    106.         ...this.searchForm,
    107.         ...this.page,
    108.         ...page,
    109.       }
    110.  
    111.       this.loading = true
    112.       this.fetchData(params).then((data) => {
    113.         this.loading = false
    114.         this.tableData = data.list
    115.         updatePageInfo(this.page, data)
    116.         this.showBtn = true
    117.         setTimeout(() => {
    118.           // this.showBtn = false
    119.         }, 2000)
    120.       }).catch((err) => {
    121.         this.loading = false
    122.         this.tableData = []
    123.       })
    124.     },
    125.  
    126.     fetchData(params) {
    127.       return new Promise((resolve, reject) => {
    128.         let data = dataListPage({
    129.           name: "@cname",
    130.           "sex|1": ["男", "女"],
    131.           age: "@natural(1, 100)",
    132.           city: "@city",
    133.           hobby: "@csentence(2, 10)",
    134.           createName: "@cname",
    135.           createTime: "@date",
    136.         }, params).data
    137.         console.log(data)
    138.         resolve(data)
    139.       })
    140.     },
    141.  
    142.   }
    143. }

    效果图

  • 相关阅读:
    A133P EC200M模块调试
    【DevPress】V2.0.0版本发布，增加直播功能
    【杂记】Windows首页挟持病毒查杀过程记录
    [附源码]Java计算机毕业设计SSM房车营地在线管理系统
    暑假超越计划练习题（6）
    Javascript分类面试题
    Spring Ioc 容器启动流程
    Rust 从入门到精通07-函数
    Speedoffice(word)中如何添加批注内容
    ROS学习——利用电脑相机标定
  • 原文地址：https://blog.csdn.net/cxgasd/article/details/132968700