需求描述

在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>
       <!--占位宽度 12px, 加上padding-right:12px; 正好右边距 24px;-->
       <div class="empty"/>
    </div>
</template>

<script>
    export default{
        name:"BtnWrap",
        data(){
            return {
                width:0
            }
        },
        mounted(){
            try{
                const dom = this.$refs['btn-wrap']
                // 24px 为 table cell 的 padding 值
                this.width = window.getComputedStyle(dom).width.replace('px','')*1 + 24
            }catch(e){
                console.log(e)
            }
        }
    }
</script>


<style lang="scss" scoped>
    .btn-wrap{
        font-size:0;
        display:inline-flex;
        .button--text{
            display:inline-block !important;
            margin-left:16px;
        }
        .button--text:first-child{
            margin-left:0 !important;
        }
        .empty{
            height:18px;
            width:12px;
        } 
    }
</style>