s-tool-tip 文字提示

运用场景：a-table的ellipisis样式太丑

省略号可以使用 a-table 的 ellipisis:true

效果图

// 使用方式
// <s-tool-tip> your text or element </s-tool-tip>
<script>
export default {
  name: 'SToolTip',
  render () {
    const defaultSlot = this.$slots.default
    return (
      <a-tooltip>
        <template slot="title">
          {defaultSlot}
        </template>
        {defaultSlot}
      </a-tooltip>
    )
  }
}
</script>
复制代码

在表格里使用

// s-table 为本人的 a-table 二次封装组件，直接用 a-table也是一样的
// s-table 将 colunms 配置为 scopedSlots: { customRender: 'tooltip' } 否则得一个一个设置

// s-table 里将 columns 格式化 
// 后续将发布笔者封装的 s-table 组件，以及其他组件，覆盖【管理后台】项目基本需求

// s-table.js
const columns = this.columns.map(item => {
  return {
    ellipsis: true,
    scopedSlots: { customRender: 'tooltip' },
    ...item,
  }
})

// index.vue
<s-table
  ref="table"
  row-key="id"
  :columns="columns"
  :load-data="loadData"
  :scrol="{ x: 'max-content' }"
>
  <s-tool-tip
    slot="tooltip"
    slot-scope="text"
  >
    {{ text }}
  </s-tool-tip>
</s-table>
复制代码

提供额外样式 非必要

// 文本省略号
.s-ellipisis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
复制代码