深圳市年检在哪个网站做,上海网站邮箱制作,设计好的建设网站,泰安整站优化Vxe UI vue vxe-table 如何实现单元格多行文本超出、多行文本溢出省略
代码
配合 vxe-text-ellipsis 组件实现多行文本溢出省略
templatedivvxe-grid v-bindgridOptionstemplate #defaultAddress{ row }vxe-te…Vxe UI vue vxe-table 如何实现单元格多行文本超出、多行文本溢出省略
代码
配合 vxe-text-ellipsis 组件实现多行文本溢出省略
templatedivvxe-grid v-bindgridOptionstemplate #defaultAddress{ row }vxe-text-ellipsis line-clamp3 :contentrow.address/vxe-text-ellipsis/template/vxe-grid/div
/templatescript setup
import { reactive } from vue
const gridOptions reactive({border: true,showOverflow: true,height: 500,columnConfig: {resizable: true},rowConfig: {height: 80},columns: [{ type: seq, width: 70 },{ field: name, title: Name },{ field: sex, title: Sex, width: 100 },{ field: address, title: Address, width: 400, slots: { default: defaultAddress } }],data: [{ id: 10001, name: Test1, role: Develop, sex: Man, age: 28, address: 这是一个多行的文本溢出省略组件用于实现多行文本溢出省略这将非常有用如果没有超出则显示全部文本如超出指定行数之后文字会被会自动截断并且会出现省略后面文字会被隐藏将不会被显示出来。 },{ id: 10002, name: Test2, role: Test, sex: Women, age: 22, address: 这是一个多行的文本溢出省略组件 },{ id: 10003, name: Test3, role: PM, sex: Man, age: 32, address: 这是一个多行的文本溢出省略组件用于实现多行文本溢出省略 },{ id: 10004, name: Test4, role: Designer, sex: Women, age: 24, address: 这是一个多行的文本溢出省略组件用于实现多行文本溢出省略这将非常有用如果没有超出则显示全部文本如超出指定行数之后文字会被会自动截断并且会出现省略后面文字会被隐藏将不会被显示出来。 },{ id: 10005, name: Test5, role: Designer, sex: Women, age: 42, address: 这是一个多行的文本溢出省略组件 },{ id: 10006, name: Test6, role: PM, sex: Women, age: 36, address: 这是一个多行的文本溢出省略组件 },{ id: 10007, name: Test7, role: Test, sex: Women, age: 39, address: 这是一个多行的文本溢出省略组件用于实现多行文本溢出省略这将非常有用如果没有超出则显示全部文本如超出指定行数之后文字会被会自动截断并且会出现省略后面文字会被隐藏将不会被显示出来。 },{ id: 10008, name: Test8, role: Designer, sex: Women, age: 56, address: 这是一个多行的文本溢出省略组件 }]
})/script效果
固定行高 动态行高
