【CSS】为图标之间添加分割符

image.png
以element-ui加操作列为例

<template>
    <div>
        <!-- 按钮方式 -->
        <el-table-column 
            v-if="colBtnsFlag"
            v-bind="colBtnsAttr">
            <template slot-scope="scope">
                <el-button 
                    v-for="(btn, index) in colBtns"
                    :key="index" 
                    @click="btn.click(scope)" 
                    v-bind="btn">
                    {{ btn.text }}
                </el-button>
            </template>
        </el-table-column>
        <!-- 图标方式 -->
        <el-table-column 
            v-else-if="colIconsFlag"
            v-bind="colBtnsAttr">
            <template slot-scope="scope">
                <i class="operateIcon"
                    v-for="(btn, index) in colBtns"
                    :key="index"
                    :class="btn.icon"
                    :title="btn.text"
                    @click="btn.click(scope)">
                </i>
            </template>
        </el-table-column>
    </div>
</template>

<script>
export default {
    name:'operate',
    props: {
        colBtnsFlag: { //操作列按钮标识
            type: Boolean,
            default: false
        },
        colIconsFlag: { //操作列图标标识
            type: Boolean,
            default: false
        },
        colBtnsAttr: { //操作列属性
            type: Object,
            default: function() {
                return {
                    fixed: 'left',
                    label: '操作',
                    width: '100'
                }
            }
        },
        /**
         * 操作列按钮，使用案例如下：
         * colBtns:[
            { text:'测试1', size:'mini', 
              click(scope){console.log(scope,"scope")}, 
              icon:'el-icon-goblet-square-full'},
            { text:'测试2', size:'mini', 
              click(scope){console.log(scope,"scope")}, 
              icon:'el-icon-eleme'}
           ],
         */
        colBtns: Array, 
    }
}
</script>

<style scoped>
    .operateIcon:hover {
        color: #5cb6ff
    }
    /** 为图标之间加分割符
         若style加了scoped,则将.operateIcon改成i也可
     */
    .operateIcon::after{
        content: '';
        display: inline-block;
        background: #dce1e3;
        width: 1px;
        height: 10px;
        margin: 0 6px;
    }
    /** 将最后一个图标后的分割符去掉 */
    .operateIcon:last-child::after{
        display:none;
    }
</style>

重点：css样式部分

    .operateIcon:hover {
        color: #5cb6ff
    }
    /** 为图标之间加分割符 */
    .operateIcon::after{
        content: '';
        display: inline-block;
        background: #dce1e3;
        width: 1px;
        height: 10px;
        margin: 0 6px;
    }
    /** 将最后一个图标后的分割符去掉 */
    .operateIcon:last-child::after{
        display:none;
    }

为style加scoped的作用了解下：若不加scoped,又为 i 元素加伪元素after，则下面的分页图标也会跟着生效；加了，只对操作列生效。

image.png

在渲染函数中为图标加该样式：

image.png

PS： 但我自己在用的过程中，这里为style加了scoped后不起效了，不知道为啥