antd table组件表格内换行

效果如下：

有两种方法，本质都是使用slot。
官方定义表格至少提供两个数据，columns定义了每一列的名字和表格数据对应的key，data是传进去的表格数据，是个列表[ ]，里面的每一个{ }是表格的一行，{ }的key在colums中定义。

<a-table :columns="columns" :data-source="data">

如果想要给表格的内容换行，只需要在对应colums定义的地方加入槽，意味着不是直接返回输入的值，而是返回槽内的模板。
最简单就是在定义colums时声明这个列返回的是槽，并且自定义槽的名字，然后在HTML的模板table中具体写这个槽渲染什么，像这个text就是传入这个td的值。

      <a-tableborderedsize="middle"row-key="id":columns="col4":scroll="{x: 600}":data-source="list":hideOnSinglePage="false":pagination='false'><spanslot="RightWrap"slot-scope="text"><template v-for="(item, index) in text"><div :key="index" v-html="item"></div></template></span></a-table>

    const col4 = [{title: '权益清单',align: 'center',dataIndex: 'rightsText',key: 'rightstext',scopedSlots: { customRender: 'RightWrap' }},...]

接下来这个就是直接利用槽往里面注入div元素，因为生成div的过程是可以注入可以换行的数据的。注意这个还和行的合并一起写了：

    public get col3 () {const that = thisconst cols = [{title: '用品ID',align: 'center',width: '130px',dataIndex: 'Id'},...{title: '总计（元）',dataIndex: 'total',align: 'center',width: '200px',customRender: (value: any, row: any, index: any) => {let child = this.$createElement('div', {domProps: {innerHTML: value[0] + '<br>' + value[1] + '<br>' + value[2] + '<br>'}})let obj = {children: child,attrs: { rowSpan: 1 }}if (index === 0) {obj.attrs.rowSpan = this.list.length} else {obj.attrs.rowSpan = 0}return obj}}]return cols}

antd table组件表格内换行相关推荐

markdown如何在表格内换行？
答:使用<br>即可在表格内换行转载于:https://www.cnblogs.com/dakewei/p/11454314.html
markdown_typora排版编辑技巧(样式嵌套/撤销/列表缩进)/表格内换行
文章目录 typora 样式嵌套中的样式化与反操作通用小技巧表格内换行快捷键方式方案1:(打断上下文独立样式化) 方案2(原码编辑) 列表项缩进错误做法: 数学公式块出入到列表中表格位于列 ...
SXSSFWorkbook 表格内换行
起因导出的excel需要在表格内换行,但搜索到的方法都实现不了我的需求,经同事搜查得知,这是POI的一个bug,已经在17年八月后被解决. 生成方式 pom依赖 <dependency> ...
Antd table组件样式去除背景色
Antd table组件样式去除背景色在鼠标悬浮时背景色展示在当前项非当前行 .ant-table-tbody > tr > td { background: rgba(255,25 ...
antd table设置表格一个单元格的字体颜色_开源 UI 库中，唯一同时实现了大表格虚拟化和树表格的 Table 组件
背景有这样一个需求,一位 React Suite (以下简称 rsuite)的用户,他需要一个 Table 组件能够像 Jira Portfolio 一样,支持树形数据,同时需要支持大数据渲染. 截 ...
antd table设置表格一个单元格的字体颜色_alireacttable：高性能 React 表格组件
点击上方蓝字关注我们简介在前端开发中,表格一直都是最复杂的组件之一.表格不仅要支持丰富的操作(排序.过滤.搜索.分页.自定义列等),还要有非常好的性能以展示大量数据.很多组件库(例如 fusion ...
element-table表格内换行
内容需要换行的地方加\n css样式部分加上这个即可: .el-table .cell { white-space: pre-line; } 用户在表格内填写内容时有换行,如何在展示表格时将换行体 ...
antd 设置表头属性_解决react使用antd table组件固定表头后，表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐...
一.固定表头后表体列和表头不对齐此问题可能在antd3.24.0版本之前都存在,反正3.16.2版本是存在这个问题的,如果是3.24.0之前的版本估计只能通过修改css样式解决. 按照官网说的: 1 ...
antd table动态表头_解决react使用antd table组件固定表头后，表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐...
1.固定表头后表体列和表头不对齐此问题可能在antd3.24.0版本以前都存在,反正3.16.2版本是存在这个问题的,若是是3.24.0以前的版本估计只能经过修改css样式解决.css 按照官网说的 ...
Antd Table组件列宽的一些疑惑
前言前些年参与的几个项目,前端部分主要采用Vue+ElementUI进行开发.最近参与的项目,前端部分大胆的转向了React+Antd. 疑惑在之前的Vue+ElementUI项目里,Table组 ...

antd table组件表格内换行

antd table组件表格内换行相关推荐

最新文章

热门文章

antd table组件 表格内换行

antd table组件 表格内换行相关推荐

最新文章

热门文章

antd table组件表格内换行

antd table组件表格内换行相关推荐