iview 2.4.0里table里面的数据加<br/>无法换行

Question

之前table里面的loading属性不起作用，然后升级了一下iview版本到2.4.0，然后loading起作用了。但是发现表格里面的数据没有分行了。
这是我想要的结果

但是我自己手动加
无法实现换行，源码如下

<style>
</style>
<template>
  <div>
    <i-table :loading="loading" height="425" border stripe :columns="columns" :data="tabledata"></i-table>
  </div>
</template>
<script>
export default {
  data () {
    return {
      loading: false,
      columns: [
        {
          title: 'time',
          key: 'date',
          align: 'center'
        },
        {
          title: '数据',
          key: 'summary'
        }
      ],
      tabledata: [{date: new Date(), summary: '1、第一行<br />2、第二行<br />'}]
    }
  }
}
</script>

我运行的效果

请问这种情况怎么解决呢

Answer 1

我在更新日志里面找到了，从2.3.0开始可以设置column的属性type:html，指定渲染模式为html，默认的是normal

Answer 2

用render，类似如下

 render: (h, p) => {
              var html = "";
              var datas = p.row.datas;
              for (var index  in datas) {
                html += "<lable>" + datas[index] + "</lable>";
                html += "<br></br>";
              }
              return h("div", {
                domProps: {
                  innerHTML: html
                }
              });
            }

Answer 3

可以用render函数去渲染你想要的展示效果

Answer 4

这是版本2.0.1 的显示表格行数据代码用的是v-html 可以实现需求.
升级的版本我没有下载 不过可能改成了 v-text 或者直接赋值.
你可以去到cell.vue文件进行修改.

Answer 5

你好，我也遇到这个问题了，但是我加了type:'html'还是不好使，麻烦给看下是不是这样的？

{
    type: 'html',
    title: '结算数据',
    render: (h, params) => {
        var text = '售价：￥11<br/>结算价：￥22<br/>佣金率：22';
        return h('div', {
            props: {},
        },text);
    },
}