iview 老版本合并单元格

新版的iview中已经支持了合并单元格了，我的版本比较老，为："iview": "^3.5.2"。暂不支持。记录一下别的大佬的方法。感觉思路比较活，正在这种思路需要在解决问题的过程中学习。

核心思路：通过render方法，加上设置样式实现看似合并单元格。
代码如下：

data数据

dataList = [{index: '1',indexName: 'a',rate: '35%',standard: '描述11111',list: [{ info: "规则1", score: "100" },{ info: "规则2", score: "80" },{ info: "规则3", score: "60" },{ info: "规则4", score: "40" },]},{index: '2',indexName: 'b）',rate: '30%',standard: '描述2222'',list: [{ info: "规则1", score: "100" },{ info: "规则2", score: "80" },{ info: "规则3", score: "60" },{ info: "规则4", score: "40" },] }, ]

列的数据，在此数据中通过render来控制

    columns: any[] = [{title: '序号',key: 'index'},{title: '指标',key: 'indexName'},{title: '权重',key: 'rate'},{title: '评分标准',key: 'standard'},{title: '详情',key: 'list',width: 250,render: (h, params) => { return h('div', {attrs: {class: 'subCol'},}, [h('ul', params.row.list.map(item => {return h('li', {}, item.info)}))])}},{title: '分值',key: 'list',width: 100,render: (h, params) => {  return h('div', {attrs: {class: 'subCol'},}, [h('ul', params.row.list.map(item => {return h('li', {}, item.score)}))])}}, ] 

组件代码

<Table :columns="columns" :data="dataList"  :loading="loading" border></Table>

css

.subCol>ul>li {margin: 0 -18px;list-style: none;text-Align: center;padding: 9px;border-bottom: 1px solid #ccc;overflow-x: hidden;
}.subCol>ul>li:last-child {border-bottom: none
}

实现效果

image.png

参考网站：
https://blog.csdn.net/weixin_34138139/article/details/88600460

© 著作权归作者所有,转载或内容合作请联系作者

喜欢的朋友记得点赞、收藏、关注哦！！！