列自动折行

KevinChen

本帖最后由 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;
},
}

KevinChen · KevinChen

您好，请参考这篇示例：

https://demo.grapecity.com.cn/wi ... Styling/Columns/vue

ruoruo · ruoruo

本帖最后由 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 · KevinChen

您好，我检查了一下您的Demo，本身用法上没有什么问题，但不清楚您具体的数据是什么（看您是用Ajax请求的）

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

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

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

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

您也可以把您Demo中加载的数据，粘贴到这个在线示例上运行一下试试看能否换行。

ruoruo · ruoruo

本帖最后由 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 · KevinChen

您好，请参考我附件中的Demo，
您下载zip并解压后，直接执行npm install

再执行npm start即可，谢谢。

		自动登录	找回密码
密码			立即注册

[已处理] 列自动折行

最佳答案

5 个回复

本帖子中包含更多资源

讲师达人

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证

微信认证勋章