ruoruo 发表于 2019-11-25 11:26:21

列自动折行

本帖最后由 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 发表于 2019-11-25 11:26:22

您好,请参考这篇示例:

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

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中加载的数据,粘贴到这个在线示例上运行一下试试看能否换行。

ruoruo 发表于 2019-11-25 16:08:19

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

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

再执行npm start即可,谢谢。
页: [1]
查看完整版本: 列自动折行