css class 操作列 按钮 之间加 竖线 | class="your-handleBtn" :last-child::after

思路:botton 加一个class 每个右边加个竖线,最后一个不加。
用起来很方便

<template slot="handle"
                slot-scope="{ row, index }">
        <Button type="primary"
                v-if="row.parentItemId === '0'"
                ghost
                class="your-handleBtn"
                @click="newSubHandle(row,index)">新增子项</Button>
        <Button type="primary"
                ghost
                class="your-handleBtn"
                @click="modifyHandle(row,index)">编辑</Button>
        <Button type="error"
                ghost
                @click="deleteHandle(row,index)"
                class="your-handleBtn">删除</Button>
      </template>
.your-handleBtn{
  position: relative;
  display: inline-block !important;
  padding: 4px 9px !important;
  border:0 !important;
}

.your-handleBtn::after {
  position: absolute;
  content: '';
  display: block;
  width: 1px;
  height: 16px;
  top: 8px;
  right: -1px;
  background: #E5E5E5;
}

.your-handleBtn:last-child::after {
  display: none;
}
posted @ 2021-11-12 13:57  彭成刚  阅读(287)  评论(0编辑  收藏  举报