使用组件思想-解决table中 按钮组的间距问题

需求描述

在table 中，操作列下有多个 text-button 展示

• 要求button 之间的间距为16px;
• 最后一个button与table cell 的间距为24px;
• 已知 table cell 的 padding-left,padding-right值为12px;
• 同类问题后续不再继续做重复设定；

解决思路

封装统一的组件，在组件内部预留slot对插入的button的间距进行设置或填充，并计算出当前组件的真实宽度，最后table 中参考组件的宽度（data-width）来设置cell的宽度；达到解决同类问题的要求；

参考代码

<template>
    <div ref="btn-wrap" class="btn-wrap" :data-width="width">
       <slot