首页 > 其他分享 >实现表格列表中 宽度不够的字段的提示 换行显示

实现表格列表中 宽度不够的字段的提示 换行显示

时间:2024-08-29 16:39:14浏览次数:7  
标签:program 表格 换行 列表 trigger programName row


  {
      title: $t('program-edit-name'),
      key: 'programName',
      fixed: 'left',
      width: 190,
      ellipsis: {
        tooltip: true,
      },
      render(row) {
        return h(
          NTooltip,
          {
            trigger: 'hover',
          },
          {
            trigger: () => h('span', null, row.programName),
            default: () =>
              h(
                'div',
                {
                  style: {
                    whiteSpace: 'pre-line', // 保持换行
                    maxWidth: 'auto',
                  },
                },
                `${row.programName}
                ${$t('program-id')}: ${row.programId}`,
              ),
          },
        );
      },
    },

标签:program,表格,换行,列表,trigger,programName,row
From: https://www.cnblogs.com/bingMIN/p/18386986

相关文章

  • css grid布局实现一个复杂表格
    产品设计了这样一个表格,如下图:当然表格内容格式是固定的,本来想用elementui的,但是思考了一下,用el-table好像嵌套的比较麻烦,还要合并单元格,所以采用了grid布局。废话不多说,直接上代码:<template><divclass="table"><!--表头1--><divclass="th">类型名称<......
  • 列表与表格
    列表<ol><li>Java</li><li>Java</li><li>Java</li></ol><hr><ul><li>Java</li><li>Java</li><li>Java</li></ul><hr><dl>&l......
  • vue3导入excel表格并展示(使用xlsx插件+vite+element-plus)/js上传表格(js+xlsx)
    第一步:下载两个库npminstallfile-saver--savenpminstallxlsx--save第二步:引入import{saveAs}from'file-saver'import*asXLSXfrom'xlsx'第三步:给组件设置点击事件<el-form-item@click="handleExport">导出</el-for......
  • vue3导入excel表格并展示(使用xlsx插件+vite+element-plus)/js上传表格(js+xlsx)
    首先下载两个库npminstallxlsx--savenpminstallfile-saver--save然后在你需要导出的组件里引入库import{saveAs}from'file-saver'import*asXLSXfrom'xlsx'创建函数consthandleExport=()=>{letoneDimensionalArray=[]lettwoDimensionalArray......
  • element中表格合并单元格
    最近要写一个如下图的项目,需要合并单元格 <el-table:data="list"borderstyle="width:1000px;":span-method="objectSpanMethod"><el-table-columnalign="center"prop="frist_name":label="list[0].specName&q......
  • go 结构体列表比较是否相等
    使用reflect的DeepEqual方法场景1:结构体列表按顺序匹配(直接比较)packagemainimport( "fmt" "reflect")typeStudentstruct{ Ageint Scoreint}funcmain(){ s1:=[]Student{ {Age:1,Score:10}, {Age:2,Score:20}, {Age:3,Score:30},......
  • 【爬虫实战】——利用bs4和sqlalchemy操作mysql数据库,实现网站多行数据表格爬取数据
    前言此篇接上一篇的内容,在其基础上爬取网站的多行表格数据,以及把数据写入到mysql数据库中目录一、定位表格查找元素二、提取数据三、写入mysql数据库四、附录一、定位表格查找元素首先打开网站,如图需要爬取多行数据的表格,利用查找元素定位,看图中分析得知我要爬取的是tr......
  • 解除 Excel 表格的文档保护全攻略
    在日常工作和学习中,我们可能会遇到Excel表格被保护无法编辑的情况。别担心,今天就为大家分享几种解除Excel表格文档保护的方法。一、导入腾讯文档可以将受保护的Excel表格上传到腾讯文档。在部分情况下,腾讯文档会尝试自动解除表格保护,这样你就能够编辑内容了。如果......
  • js 正则列表
    匹配空的if代码块,匹配空的else把下面的if换成else就行了 /if(\s)*\(.*\)(\s)*\{[\s\n]*\}$/ 匹配手机号/^1[3-9]\d{9}$/ 经度(保留六位小数)/^[\-\+]?(0(\.\d{1,6})?|([1-9](\d)?)(\.\d{1,6})?|1[0-7]\d{1}(\.\d{1,6})?|180)$/ 纬度(保留六位小数)/^[\-\+]?......
  • 虚拟列表
    <template><divref="list"class="infinite-list-container"@scroll="scrollEvent($event)"><divclass="infinite-list-phantom":style="{height:listHeight+'px'}"></di......