huanggr
iview表格拆分技巧
iview的表格拆分不同于一般的拆分，普通的表格拆分（table）可以使用rowspan，colspan来进行横向和纵向的拆分以及合并，但是iview的操作与之有着很大的不同，下面将为大家详细讲解思路。
iview表格拆分技巧-思路分析
我们可以把一个iview表格看做是由div等标签拼接起来的表格，但是不同于table，表格的外部样式已经由iview进行的封装，那么外部的样式动不了，我们怎么办呢？其实我们可以使用render在表格内部在生成一两个表格，这样子，给人的感觉就是一个表格均分成了两个，如下图：
iview表格拆分技巧-图片示例：
现在我们可以看到一个表格就被均分为了两个，且中间有分割线隔开，这样这个效果就完成啦！
iview表格拆分技巧-源码展示：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | //iview表格拆分技巧 //iview表格拆分技巧 <template> <Table :columns="columns1" :data="data"></Table> </template> <script> export default { data () { return { name: 'table', columns1: [ { title: '属性名', key: 'valueName' }, { title: '属性值', key: 'name', render: (h, params) => { return h('div', [ h('p', `武器伤害：` + params.row.attribute.Hurt), h('div', { style: { margin: '5px 0', height: '1px', background: '#ccc', } }), h('p', `武器范围:` + params.row.attribute.Range + '米') ]) } } ], data: [ { attribute: { Hurt: 30, Range: 300 }, valueName: '雷神 - M4A1', }, { attribute: { Hurt: 30, Range: 300 }, valueName: '黑龙 - M4A1', } ] } } } </script> |
iview表格拆分技巧-补充说明
如果你需要添加一些事件来进行一些操作，也可以在Render中直接书写：
这里举的例子就是一个点击事件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | //iview表格拆分技巧-添加事件 //iview表格拆分技巧 render: (h, params) => { return h('div', [ h('p', `武器伤害：` + params.row.attribute.Hurt), h('div', { style: { margin: '5px 0', height: '1px', background: '#ccc', }, on: { click: () => { //这里放事件 console.log(params.row) } } }), h('p', `武器范围:` + params.row.attribute.Range + '米') ]) } |
如果你还有不清楚的，也可以查看我写的ivew中render的使用：
iview中的render函数的用法
7