el-table中render方法中实现显示文字与提示文字不同的效果

新建一个组件

.vue

<template>
  <div class="tooltip">
    <el-tooltip effect="dark" open-delay="500" class="ell" placement="top" v-if="showText !== '-'">
      <div slot="content">
        <!-- 插槽，可提供多行的提示信息 -->
        <!-- 全局组件，这里是配置图标icon和提示信息的地方 -->
        <!-- 在其他组件中引用方式详见 table-header-tips.vue 组件中的 renderHeaderMethods 方法 -->
        <span>{{ tooltipText }}</span>
      </div>
      <div>{{ showText }}</div>
    </el-tooltip>
    <div v-else>-</div>
  </div>
</template>
<script>
export default {
  name: 'promptMessages',
  data() {
    return {};
  },
  props: {
    tooltipText: {
      type: String
    },
    showText: {
      type: String
    }
  }
};
</script>
<style lang="scss" scoped>
/deep/.el-tooltip {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>

.js

import promptMessages from './promptMessages.vue';

promptMessages.install = function(Vue) {
  Vue.component(promptMessages.name, promptMessages);
};

export default promptMessages;

引入

import Vue from 'vue';
import promptMessages from '@/components/pc/promptMessages';
Vue.use(promptMessages);

render

render: (h, params) => {
  const { allSystem, authzSystem } = params.row;
   const tooltipText = authzSystem === '-' ? '-' : authzSystem.map(curr => curr.systemName).join('、');
   const showText = allSystem ? '全部应用' : tooltipText;
   return [
     h('promptMessages', {
       // 引用 promptMessages 全局组件
       props: {
         // messages 里面配置的信息即为 Tooltip 提示信息
         tooltipText,
         showText
       }
     })
   ];
 }