vue3+element-plus表格中单元格超出指定长度

需求：表格中单元格超出指定长度，省略号显示，悬浮显示全部。

样式需求：悬浮框指定宽度

方法一：使用插槽

//index.js
export const columns = [
 {
        label: '地址',
        prop: 'adress',
        slot: 'adress'
    },
]
//index.vue
<template>
  <template #adress="{ data }">
       <el-tooltip
          :disabled="data.adress=== null? true: data.adress.length <= 7"
          v-if="data.adress!== null"
          popper-class="tool-tip"
          effect="dark"
          :content="data.adress"
          placement="top-start"
         >
          <div class="adressList"> {{ data.adress|| '--' }} </div>
          </el-tooltip>
</template>
</template>
<style scoped>
.adressList{
    max-width: 100px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>

方法2：使用render

//index.js
import { h } from 'vue'
import { ElTooltip } from 'element-plus'
export const columns = [
   {    label: '地址',
        prop: 'adress',
        width: '180px',
        render: (row) => {
            const content =row.adress&& row.adress.length > 7
                           ? row.adress.slice(0, 7) + '...'
                           : row.adress|| '--'
            return h(
                'div',
                {
                    style: {cursor: 'pointer'}
                },
                [
                    h(
                        ElTooltip,
                        {
                            popperClass: 'tool-tip',
                            placement: 'top',
                            effect: 'light',
                            trigger: 'hover',
                            content: row.adress
                        },
                        { default: () => content }
                    )
                ]
            )
        }
    },
]

el-tooltip样式

//index.css
//悬浮提示宽度
.tool-tip{
    max-width:600px !important
}

to