ColumnText 文本列

说明

基于 el-table-column 的封装，支持单元格内文本链接形式、格式化显示、自定义样式、文本溢出 Tooltip 等能力。

（1）可用于 el-table 和 y-table

（2）show-overflow-tooltip 属性被 noTip 代替，且默认值为 false ，即默认显示tooltip

（3）formatter 函数参数顺序与 el-table-column 有所不同

用法示例

基础用法

共 0项数据

• 1

Go to

<template>
  <y-table :data="tableData">
    <!-- 基础文本 -->
    <y-column-text prop="name" label="姓名" />

    <!-- 链接态与点击事件 -->
    <y-column-text prop="name" label="可点击" :link="true" @click="onRowClick" />

    <!-- 自定义格式化显示 -->
    <y-column-text prop="age" label="年龄(格式化)" :formatter="formatAge" />

    <!-- 文本样式 -->
    <y-column-text prop="address" label="自定义文本样式" :text-style="{ color: 'red', fontSize: '16px', fontWeight: '600' }" />

    <!-- 溢出 Tooltip 与禁用 -->
    <y-column-text prop="desc" label="默认tooltip" />
    <!-- 使用no-tip禁用默认tooltip -->
    <y-column-text prop="desc" label="无tooltip" no-tip />

    <!-- 配合y-text-tooltip自定义tooltip，注意要禁用column本身的tooltip -->
    <y-column-text prop="desc" label="自定义tooltip" no-tip>
      <template #default="{ value }">
        <y-text-tooltip lineClamp="2" placement="top-end">
          {{ value }}
        </y-text-tooltip>
      </template>
    </y-column-text>

    <!-- 自定义表头样式 -->
    <y-column-text prop="address" label="自定义表头样式"
      :header-style="{ color: '#409eff', fontWeight: 'bold', fontSize: '16px' }" />


  </y-table>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'

const tableData = [
  { name: '张三', age: 25, address: '杭州市拱墅区', desc: '这是一段较长的描述文本，用于演示溢出提示这是一段较长的描述文本，用于演示溢出提示这是一段较长的描述文本，用于演示溢出提示', status: 'active' },
  { name: '李四', age: 30, address: '苏州市吴中区', desc: '短文案', status: 'inactive' }
]

const onRowClick = (row: any) => {
  console.log('row clicked:', row.name)
  ElMessage.success('row clicked:' + row.name)
}

const formatAge = (value: any) => `${value} 岁`
</script>

隐藏源码

API

Attributes

属性名	说明	类型	默认值
link	是否以链接样式展示，开启后点击会触发 click 事件	boolean	false
formatter	自定义单元格文本格式化函数，作用同 el-table-column的 formatter，只是修改了参数顺序	function	undefined
text-style	单元格内文本样式	object	-
no-tip	是否禁用溢出 Tooltip 提示，代替 show-overflow-tooltip	boolean	false
tip-props	Tooltip 配置对象；传入对象时将作为 show-overflow-tooltip 的配置	object	{popperClass:'y-column-text__tooltip'}
label	显示的列标题	string	—
prop	列内容的字段名， 也可以使用 property属性	string	—
width	列的宽度，固定的	string / number	'auto'
min-width	列的最小宽度，会把剩余宽度按比例分配给设置了 min-width 的列	string / number	100
fixed	列是否固定在左侧或者右侧。 true 表示固定在左侧 true	enum / boolean	false
render-header	列标题 Label 区域渲染的函数	Function	—
resizable	是否可以通过拖动改变宽度（需要在 el-table 上设置 border=true）	boolean	true
align	内容对齐方式	enum	'left'
header-align	表头对齐方式， 若不设置该项，则使用表格的对齐方式	enum	'left'
class-name	列的 className	string	'y-column-text'
label-class-name	当前列标题的自定义类名	string	—

Slots

名称	说明	参数
default	单元格内容插槽，如果设置了 formatter，则value是转换后的值	object
header	自定义表头内容	object
expand	展开列的自定义内容	object

Events

事件名	说明	类型
click	当 link 为 true 时点击文本触发	function