请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

ruoruo

初级会员

2

主题

4

帖子

228

积分

初级会员

积分
228
  • 81

    金币

  • 4

    帖子

  • 0

    精华

[已处理] 列自动折行

ruoruo
初级会员   /  发表于:2019-11-25 11:26  /   查看:48  /  回复:5
1金币
本帖最后由 ruoruo 于 2019-11-25 17:15 编辑

设置了wordWrap="true"并且调用 autoSizeRows 方法但是列还是没有折行。 <wj-flex-grid :itemsSource="data":autoGenerateColumns="false" :initialized="onInitialGrid">


<wj-flex-grid-column header="名稱" binding="c052"  width="2*" wordWrap="true"  align='center' ></wj-flex-grid-column>
</wj-flex-grid>



mounted: function() {
                                
                 this.grid.autoSizeRows();
},
methods: {
        onInitialGrid: function(grid) {
            this.grid = grid;
},
}




5 个回复

倒序浏览
KevinChen
超级版主   /  发表于:2019-11-25 15:08:03
沙发
请点击评分,对我的服务做出评价!5分为非常满意!

葡萄城技术服务团队
官方网站:https://www.grapecity.com.cn/
SpreadJS v12.2 全新发布:打印、拖拽全面增强
回复 使用道具 举报
ruoruo
初级会员   /  发表于:2019-11-25 15:14:38
板凳
本帖最后由 ruoruo 于 2019-11-25 15:18 编辑
KevinChen 发表于 2019-11-25 15:08
您好,请参考这篇示例:

https://demo.grapecity.com.cn/wijmo/demos/Grid/Styling/Columns/vue

你好,我就是参考这个系列做的,还是无法自动折行,我把我做的上传上去了,测试了下wordWrap还是等于默认的false,但我明明已经把它设置为true<wj-flex-grid-column header="名稱" binding="c052" wordWrap="true"   width="2*" align='center' ></wj-flex-grid-column>
回复 使用道具 举报
KevinChen
超级版主   /  发表于:2019-11-25 15:48:34
地板
您好,我检查了一下您的Demo,本身用法上没有什么问题,但不清楚您具体的数据是什么(看您是用Ajax请求的)

我解释一下,这里换行的规则是,当内容为英文字符,且内容中有换行符(如空格、中划线-等)时,会以换行符的位置来折行。

当内容为中文字符时,会自动折行。

当内容为英文字符,且没有任何换行符时,不会自动折行。

所以想了解一下您的内容格式是什么样的?

您也可以把您Demo中加载的数据,粘贴到这个在线示例上运行一下试试看能否换行。
请点击评分,对我的服务做出评价!5分为非常满意!

葡萄城技术服务团队
官方网站:https://www.grapecity.com.cn/
SpreadJS v12.2 全新发布:打印、拖拽全面增强
回复 使用道具 举报
ruoruo
初级会员   /  发表于:2019-11-25 16:08:19
5#
本帖最后由 ruoruo 于 2019-11-25 16:10 编辑
KevinChen 发表于 2019-11-25 15:48
您好,我检查了一下您的Demo,本身用法上没有什么问题,但不清楚您具体的数据是什么(看您是用Ajax请求的) ...

dome中具体数据是一个数组,(即data.eform),内容是中文字符,但不管我怎么写都无法实现自动折行,我想要实现的是红色数据自动换行[{"id":1,"status":"Q","kind":"buy_project","kind_org":"buy_project","order_no":"2019000001","order_no_org":"2019000001","dept_no":"1200","dept_no_org":"1200","c051":"珠海","c051_org":"珠海","c052":"测试用测试用测试用测试测试用测试用测试用测试用测试用","c052_org":"测试用测试用测试用测试测试用测试用测试用测试用测试用","c120":20180202,"c120_org":20180202,"c121":"2018/12/12","c121_org":"2018/12/12","c130":null,"c130_org":null,"c062":50000,"c062_org":50000,"c002":"R","c002_org":"R","c123":"5000","c123_org":"5000","c124":"2019/12/12","c124_org":"2019/12/12","c131":null,"c131_org":null,"c132":null,"c132_org":null,"c133":null,"c133_org":null,"c134":null,"c134_org":null},{"id":2,"status":"Q","kind":"buy_project","kind_org":"buy_project","order_no":"2019000002","order_no_org":"2019000002","dept_no":"1100","dept_no_org":"1100","c051":"珠海","c051_org":"珠海","c052":"测试FDFSDFSFDFSFSFDFS","c052_org":"测试FDFSDFSFDFSFSFDFS","c120":20190306,"c120_org":20190306,"c121":"2019/03/06","c121_org":"2019/03/06","c130":null,"c130_org":null,"c062":50000,"c062_org":50000,"c002":"R","c002_org":"R","c123":"6000","c123_org":"6000","c124":"1212/12/12","c124_org":"1212/12/12","c131":null,"c131_org":null,"c132":null,"c132_org":null,"c133":null,"c133_org":null,"c134":null,"c134_org":null}]
回复 使用道具 举报
KevinChen
超级版主   /  发表于:2019-11-25 17:28:09
6#
您好,请参考我附件中的Demo,
您下载zip并解压后,直接执行npm install

再执行npm start即可,谢谢。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
请点击评分,对我的服务做出评价!5分为非常满意!

葡萄城技术服务团队
官方网站:https://www.grapecity.com.cn/
SpreadJS v12.2 全新发布:打印、拖拽全面增强
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册