iview合并单元格

使用iview的table要如何合并单元格

其实它的原理是拆分单元格

代码:
   <Table :columns="columns1" :data="data1" border></Table>
   <script>
   	export default {
	  data () {
	    columns1: [
	        {
	          title: '分类',
	          align: 'center',
	          key: 'type',
	          width: 150
	        },
	        {
	          title: '标准名称',
	          align: 'center',
	          key: 'list',
	          width: 240,
	          render: (h, params) => {
	            return h('div', {
	              attrs: {
	                class: 'subCol'
	              }
	            },
	            [
	              h('ul', this.data1[params.index].list.map(item => {
	                return h('li', {
	                }, item.name)
	              }))
	            ])
	          }
	        },
      ],
      data1: [
        {
          type: '基础类',
          list: [
            {
              name: '术语SZY101-2019'
            },
            {
              name: '信息分类及编码规定SZY102-'
            },
            {
              name: '标准体系SZY103-2019'
            }
          ]
        },
      ]
	}
}
 </script>
 <style>
.subCol>ul>li{
      margin:0 -18px;
      list-style:none;
      text-Align: center;
      padding-top: 9px;
      border-bottom:1px solid #ccc;
      overflow-x: hidden;
      min-height: 42px;
}
.subCol>ul>li:last-child{
  border-bottom: none
}
</style>
效果:

iview合并单元格_第1张图片

你可能感兴趣的:(vue,iview,table,合并单元格,vue)