el-table 表格文字后面追加图标

最新推荐文章于 2024-05-16 17:14:06 发布

爱心觉罗晓宇

最新推荐文章于 2024-05-16 17:14:06 发布

阅读量920

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_44716001/article/details/131288679

版权

el-table 表格文字后面追加图标（文字超出宽度也不会隐藏图标）个人笔记而已

效果如图

  <el-table ref="table" v-loading="loading" :data="roleList">
          <el-table-column
            label="角色"
            prop="username"
            width="200"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="{ row }">
              <div class="text-wrapper">
                <span class="text">{{ row.username }}</span>
                <el-button
                  class="btn"
                  icon="el-icon-search"
                  @click="handleButtonClick(row, 1)"
                  size="mini"
                  round
                ></el-button>
              </div>
            </template>
          </el-table-column>
</el-table>

样式 scss 

.text-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 150px; /* 注意这里必须设置宽度 */
}
.text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn {
  min-width: 0;
  margin-left: 10px;
}
.el-button--mini.is-round {
  border: none;
}