javascript - 如何在vue中的表格行中制作左边的徽章？

Question

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"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="Name"
        width="180">
        <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 主要 = { 数据() { 返回 { 表数据:[{ 日期:'2016-05-03'， 名称:'汤姆'， 地址号码。 189, Grove St, 洛杉矶' }, { 日期:'2016-05-02'， 名称:'汤姆'， 地址号码。 189, Grove St, 洛杉矶' }, { 日期:'2016-05-04'， 名称:'汤姆'， 地址号码。 189, Grove St, 洛杉矶' }, { 日期:'2016-05-01'， 名称:'汤姆'， 地址号码。 189, Grove St, 洛杉矶' }] } } } var Ctor = Vue.extend(主) new Ctor().$mount('#app')

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

Answer 1

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

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