首页 > 其他分享 >vxe-table 坑:可编辑表格表头不显示编辑图标

vxe-table 坑:可编辑表格表头不显示编辑图标

时间:2023-09-06 10:33:52浏览次数:38  
标签:显示 vxe 编辑表格 表头 table icon 图标

问题

"vxe-table": "^3.5.9",官方文档默认显示编辑图标。但实际上没有显示。

vex-tableedit-config 添加 showIcon: true,也不生效。

设置 icon 也不生效。

image

image

替代方案

vxe-column 设置插槽 <template #default="{ row }"></template>,内部显示内容添加 icon

新的问题

插槽内容中设置 <i class="vxe-icon-edit"></i>,页面不会显示,审查元素发现宽高为零。

替代方案

使用 <i class="el-icon-edit"></i> 代替 vxe icon,能够正常显示。

效果:

image

标签:显示,vxe,编辑表格,表头,table,icon,图标
From: https://www.cnblogs.com/shayloyuki/p/17681614.html

相关文章

  • 打印 公共表头和表尾部分
    ​ <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>无标题文档</title><style>@m......
  • 018 学习笔记-- 实现二维表头统计(存储过程+游标+行转列+字符串截取)
    实现下图类似效果统计 数据库设计如下  存储过程如下所示:USE[DBTEST]GO/******Object:StoredProcedure[dbo].[GetData]ScriptDate:2023-09-0116:56:01******/SETANSI_NULLSONGOSETQUOTED_IDENTIFIERONGOALTERproc[dbo].[GetData]asdeclare......
  • vxe-table合并行后错位
    使用vxe-table的属性:span-method合并行,之后下拉后会错位   原因:缺少配置:scroll-y="{enabled:false}" ......
  • 记录一个解决方法- 使用editableProTable表头筛选,无法重置,位置偏移
    问题如图:切换原始告警和收敛告警以后,由于二者用到同一个table,切换之后再点击筛选条件,则筛选框的位置发生偏移解决办法:给table一个key属性,改变table中的数据或者列时,去改变这个唯一的key,key值改变,table就可以重新渲染了!......
  • 可编辑表格
    <template><div><divclass="table-wrap"><divclass="title-wrap"><span>{{name}}</span><span@mouseenter="changeFlag"@mouseleave="changeFlag"&g......
  • elementUi table表格 标头自定义,给表头加点击事件
    <el-table-columnlabel="">  <el-table-columnprop="column":render-header="renderHeader"width="160">    <templateslot-scope="scope">      <span>{{scope.row.column[......
  • VxeTable 列动态数据过滤 FilterContent
    1、加入组件,并注册:下载官网实例将VxeTable的v4下的位置中的画框的几个都拷到自己的项目中,然后打开filter.tsx,将组件的引用路径调整自己的项目一致,如果是一样就不改了。这一步,要保证filter.tsx中引用到4个vue文件就可以。  2、引入到项目中,保证项目能读到filter.tsx,这样就......
  • el-table表头高亮动画效果
    el-table表头高亮动画效果<divclass="front-table"><el-table:data="tableData"height="100%"stripe:header-cell-style="{backgroundC......
  • ASP.NET WebForm中asp:Repeater和UI:Grid数据为空时如何显示表头?
    一、asp:RepeaterRepeater控件用于显示被绑定在该控件上的项目的重复列表。Repeater控件可被绑定到数据库表、XML文件或者其他项目列表。1.1-前台页面代码<asp:RepeaterID="ImageTypeListNew"runat="server"OnItemCommand="ImageTypeListNew_ItemCommand">......
  • asp:Repeater和UI:Grid数据为空时如何显示表头?
    一、asp:RepeaterRepeater控件用于显示被绑定在该控件上的项目的重复列表。Repeater控件可被绑定到数据库表、XML文件或者其他项目列表。 1.1-前台页面代码1<asp:RepeaterID="ImageTypeListNew"runat="server"OnItemCommand="ImageTypeListNew_ItemCommand">2......