antd表格中的操作按钮分隔符优化
在antd里面我们通过使用的 <a-divider type="vertical"/>这个组件来分隔我们的操作符，如下面的代码：
<span slot="caozuo" slot-scope="text, record"> <div v-if="postType=='post'"> <a v-if="record.postatus == 'pending'" @click="handleAudit(record)">审核</a> <a v-else @click="handleEdit(record)">编辑</a> <a-divider type="vertical"/> <a @click="handleSee(record)">查看</a> </div> <div v-else> <a @click="handleEdit(record)">编辑</a> <a-divider type="vertical"/> <a @click="handleSee(record)">查看</a> </div> </span>上面的业务逻辑通过比较简单，如果对于比较复杂的业务逻辑，你们在divider这个组件上也要加上相应的判断才能很好的展现我们需要的结构，如下图
甚至，即使是这样，也存在不太好处理的情况发生
因此我们这里就摒弃这个组件，采用css样式的方式来实现，样式也很简单，样式如下：
.table-line-a{ & a:after{ content:"|"; margin: 0 5px; color: #e8e8e8; } & > a:last-child:after{ content:""; color: #fff; }}然后我们只需要在我们需要的地方加入样式即可：
<span class="table-line-a" slot="caozuo" slot-scope="text, record">
<span v-if="undefined != record.my028888Usermate[0]">
a标签业务逻辑
</span>
<span v-else>
a标签业务逻辑
</span>
a标签业务逻辑
</span>
这样最终呈现出来的效果如下：
大家可以尝试下
爆款云服务器s6 2核4G 低至0.46/天，具体规则查看活动详情