如何在vue的表格行中制作左侧的徽章？

Posted 2023-02-23

【中文标题】如何在vue的表格行中制作左侧的徽章？

【英文标题】：How make badgets of left in table row in vue?

【发布时间】：2019-11-03 23:24:59

【问题描述】：

Here 是 jsfiddle 示例，它看起来像这样：

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.9.1/lib/index.js"></script>
<div id="app">
<template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="Date"
        >
      </el-table-column>
      <el-table-column
        prop="name"
        label="Name"
        >
        <el-badge :value="10" class="item" >
           <el-button size="mini">Comments</el-button>
           </el-badge>
      </el-table-column>
      <el-table-column
        prop="address"
        label="Address">
      </el-table-column>
    </el-table>
  </template>
</div>

CSS

@import url("//unpkg.com/element-ui@2.9.1/lib/theme-chalk/index.css");

.el-table .cell 
  overflow: visible;

JS

var Main = 数据（） 返回 表数据：[ 日期：'2016-05-03'， 名称：“汤姆”， 地址号码。洛杉矶格罗夫街 189 号 , 日期：'2016-05-02'， 名称：“汤姆”， 地址号码。洛杉矶格罗夫街 189 号 , 日期：'2016-05-04'， 名称：“汤姆”， 地址号码。洛杉矶格罗夫街 189 号 , 日期：'2016-05-01'， 名称：“汤姆”， 地址号码。洛杉矶格罗夫街 189 号 ] var Ctor = Vue.extend(Main) 新的 Tor().$mount('#app')

每个徽章都放在评论按钮之后。有没有办法让它在左边？

【参考方案1】：

徽章已绝对定位到right。将此 CSS 添加到您的样式表中以将其放置在左侧。

.el-badge__content.is-fixed
  left: -10px;
  right: auto;
  transform: translateY(-50%);

【讨论】：

如果您将此标记为已接受的答案，如果它可以帮助您实现您想要的，我将不胜感激。