Ant design table表格解决后台传2个空格，前端只渲染一个空格问题。（解码和编码）

已于 2022-05-17 00:12:52 修改
阅读量1.3k 收藏 1
点赞数
分类专栏： 2022Vue学习笔记 文章标签： vue.js 前端 javascript
于 2022-04-08 19:53:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Blue54/article/details/124037062
版权

customRender:在这里面作对当前行的处理，后面那个decodeURI是解码的，可以不用看。这条知识跟你讲下，Ant design对table表格的行元素进行处理的位置。

{ title: '队长昵称', dataIndex: 'nickName', customRender: text => { return decodeURI(text) } },

这个下面的才是正文：重点在white-space：pre,设置使他原样渲染后台传过来的数据。也就是后台传两个空格。那么前端也渲染两个空格。

解码：decodeURI()

编码：encodeURI()

Ciwei蓝
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue用ant design中table表格,点击某行时触发的事件操作
01-18
使用customRow 设置行属性，写对应事件 ...补充知识：Ant-Design-Vue table 合并单元格，并且添加点击事件 点击行，有一个customRow。可以配置点击事件。 单元格的自定义分为两种方式。 一种是：通过tem
vue输入空格符 以及空字符串在页面不显示或者只显示一个的问题
weixin_44492275的博客
05-18 3177
其实没有不显示的情况,都是显示一个 其原因是vue2.6版本升级之后页面template中的换行和空格都被过滤了,不管打印多少都会只打印一个 想要打印多个空格可以通过vue的指令v-html实现 <span v-html="'嗨&nbsp;&nbsp;&nbsp;嗨'"></span> 并且注意使用v-html的标签不能再输入内容,就算输入也会只显示v-html中的内容 ...
Vue / Html 等前台中连续多个空格只显示一个空格的解决方法
Jay的个人博客
12-19 3774
Vue / Html 等前台中连续多个空格只显示一个空格的解决方法. white-space的简单介绍。
html连续多个空格只显示一个空格的解决方法
富朝阳的博客
07-05 2827
html连续多个空格只显示一个空格的解决方法，想要页面展示多个字符，可以使用实体字符&内部碎片；来代替空格，如下这样：name。替换成实体字符后将变量用innerHtml展示在页面中，否则浏览器无法识别哦。
解决数据列表页面中数据有两个空格，但前端页面解析为一个空格
peipei的博客
09-18 1364
在前端代码中&nbsp和空格的区别： 在html代码中每输入一个转义字符&nbsp就表示一个空格，输入十个&nbsp，页面中就显示10个空格位置。 而在html代码中输入空格，不管输入多少个空格，最终在页面中显示的空格位置只有一个。 解决方法很简单：把c#后台中获取的数据的空格字符“ ”替换成字符“&nbsp;” ProductName =获取的数据.Replace(" ","&nbsp;"); ...
列表页面中字段显示仅仅显示一个空格，但是数据库中的数据含有两个空格
zyy123456789_123的博客
11-06 732
给数据添加上 var columns = [ {“data” : “GID”,orderable : false, ‘render’ : function(data, type, full, meta) { return ‘’; },“width” : 11,‘searchable’ : false}, {“data” : “_XH”,orderable : false,‘render’ : f...
vue的h渲染函数和customRender在ant design vue的table组件的使用
动感超人的博客
10-28 4540
【代码】vue的h渲染函数和customRender在ant design vue的table组件的使用。
ant design vue 表格table 默认勾选几项的操作
01-22
在 ant design vue 中，表格的第一列是联动的选择框 截一张官方文档图，图示最后一排就是禁用状态 点击 checkbox 会触发onChange , 从而得到selectedRowKeys,selectedRowKeys就是选中的 key 数组。 onChange: ...
ant design vue中表格指定格式渲染方式
01-18
注意点：定义的columns一定要写在data中，否则在加载过程中由于渲染顺序会导致其中的渲染函数无法识别 渲染方法1： 指定渲染函数： const columns = [ { title: '排名', dataIndex: 'key', customRender: ...
Ant Design前端框架 v3.25.2
08-22
Ant Design 是阿里开源的一套企业级的 UI 设计语言和 React 实现，使用 TypeScript 构建，提供完整的类型定义文件，自带提炼自企业级中后台产品的交互语言和视觉风格、开箱即用的高质量
解决Vue前端多空格自动省略为一个空格问题
xiehonglin88的博客
02-03 2055
vue前端多空格默认省略为一个空格问题修改 标签样式上添加如下样式即可 style="white-space:pre;" 实际展示效果如下： OK，解决，特此记录！
ant中使用可编辑表格数据发生变化页面不渲染问题
weixin_52031155的博客
02-24 2238
ant中使用可编辑表格数据发生变化页面不渲染问题 小编这里写了个可编辑表格，复制了ant的表格可编辑组件，修改需求之后如下图： 后发现当我切换短信内容时，表格未更新。 解决思路： 先确定一下有没有得到数据 分析是问题所在（是可编辑表格还是不可编辑表格还是整个表格没有发生变化） 修改问题 然后我发现问题在可编辑的部分未更新数据，未更改代码如下： <template v-for="(item, index) in columns"> <a-table-colum
vue3 antd table表格的增删改查（二）input输入框根据关键字搜索【后台管理系统 请求后端接口 前后端交互】
XSL_HR的博客
11-29 3624
vue3 + ant design vue + table 后台管理系统通过请求后端接口实现关键字搜索。纯前端实现关键字搜索，显然很简单，但是在项目中，一般都会编写与搜索相关的接口，将任务功能的实现分工，因此在有接口的情况下，我们也要学会如何使用接口来实现搜索。
为了标签结构好看，一个标签写一行，浏览器 在渲染页面的时候就会把两个标签之间的回车键渲染成一个空格
qq_42661800的博客
12-03 275
图片之间存在间隙的解决方法
处理Ant编译时中文乱码问题
冰树之家
03-27 1598
在使用ant编译项目的时候经常会遇到“警告：编码 GBK 的不可映射字符”这样的信息，这个主要是因为我们在写代码的时候加入了一些中文注释，而导致编译时候出现的问题。要处理这个问题，仅仅只需要在build.xml文件中的调用javac的地方加入encoding的参数。如下所示：                encoding="utf-8"                destdir="${com
解决Vue多个&nbsp只显示一个问题
qq_57057576的博客
07-03 3123
在vue实例中，我们常常会遇到&nbsp无法多个显示的问题，其原因是vue2.6版本升级之后页面template中的换行和空格都被过滤了,不管打印多少都会只打印一个 想要打印多个空格可以通过vue的指令v-html实现 1.直接使用pre标签 输出： 同时注意，pre标签内，所有的空白符都会显示出来，换行和空格也会直接显示出来，所有&nbsp可以直接用空格代替。 2.使用v-html属性 输出： 注意：&nbsp后接；......
关于Ant的中文文件名乱码问题的解决
ffychina的专栏
02-24 2980
Ant使用zip任务打包时，如果有中文文件名时，会出现乱码，google了一堆网页，原因是找到了，但解决起来有点麻烦，要加一个jar包才行。我随便试了一下在zip的标签里增加属性encoding='gbk'，中文文件名称乱码问题就解决了，解决起来非常简单。大家如果跟我遇到同样的乱码问题，可以参考我以下的ant的例子：我的ant版本是1.7.1，eclipse3.6自带的。
IDEA + Ant-Design 中遇到的问题
fearlessnesszhang的博客
03-04 4458
1. Error running 'App': No jdk for module 'webserver' ：在App.java文件中有个main函数，但是没有运行标识。 解决办法： 检查第一个位置：File -> Other Setting -> Project Structure for New Projects 检查第二个位置：File -> Settin...
ant发布出现乱码
nicholastse880824的博客
07-22 286
在使用myeclipse的ant编译项目的时候经常会遇到“警告：编码 GBK 的不可映射字符”这样的信息，这个主要是因为我们在写代码的时候加入了一些中文注释，而导致编译时候出现的问题。要处理这个问题，仅仅只需要在build.xml文件中的调用javac的地方加入encoding的参数。 如果你的java类中注释用的是GBK，页面用的也是charset=gb2312"，这就需要在build.xml...
将ant design Table表格的其中一个首行单元格的标题title作成下拉菜单
最新发布
07-15
要将Ant Design的表格中的一个首行单元格标题(title)作为下拉菜单，可以按照以下步骤进行操作： 1. 首先，确保已经正确安装并导入了Ant Design的相关依赖。 2. 在data中定义一个`dropdownMenuVisible`属性来控制下拉菜单的显示状态，以及一个`menuOptions`数组来存储下拉菜单选项。 ```vue <template> <div> <a-table :columns="columns" :data-source="dataSource" row-key="id"> <!-- 表格内容 --> </a-table> </div> </template> <script> // ... export default { data() { return { dropdownMenuVisible: false, menuOptions: [], // 下拉菜单选项 // ... }; }, // ... }; </script> ``` 3. 在表格的列配置中，将需要作为下拉菜单的首行单元格标题(title)设置为自定义的渲染函数。 ```vue <script> // ... export default { // ... data() { // ... }, computed: { customTitleRender() { return (text, record, index) => { if (index === 0) { return ( <a-dropdown visible={this.dropdownMenuVisible} trigger={['click']} overlay={this.renderMenuOptions} on-visible-change={this.handleDropdownVisibleChange} > <a class="ant-dropdown-link" onClick={(e) => e.preventDefault()}> {text} <a-down-icon /> </a> </a-dropdown> ); } return text; }; }, renderMenuOptions() { return ( <a-menu slot="overlay"> {this.menuOptions.map((option) => ( <a-menu-item key={option.key}>{option.label}</a-menu-item> ))} </a-menu> ); }, }, // ... }; </script> ``` 4. 在自定义的渲染函数`customTitleRender`中，判断当前单元格是否是首行单元格(index === 0)，如果是，则使用`a-dropdown`包裹标题，并通过`overlay`属性指定下拉菜单的内容。同时，使用`visible`和`on-visible-change`属性来控制下拉菜单的显示和隐藏。 5. 在下拉菜单的内容中，通过`a-menu`和`a-menu-item`来渲染下拉菜单选项。你可以根据具体需求，使用`v-for`指令遍历`menuOptions`数组，生成对应的菜单项。 6. 在methods中实现相关的事件处理函数。 ```vue <script> // ... export default { // ... methods: { handleDropdownVisibleChange(visible) { this.dropdownMenuVisible = visible; }, // 其他事件处理函数 }, // ... }; </script> ``` 通过以上步骤，你可以将Ant Design表格中的一个首行单元格标题(title)作为下拉菜单。请注意，以上代码仅为示例，你需要根据自己的实际需求进行适当调整。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值