iView-Table合并,防止串行

Vue 同时被 2 个专栏收录
63 篇文章 0 订阅
82 篇文章 0 订阅

串行的效果

合并后的效果

<template>
	<Table :columns="columns14" :data="data5" border :span-method="handleSpan" class="tableclass"></Table>
</template>
<script>
	export default {
		name: "tableone",
		data() {
			return {
				columns14: [{
						title: '序号',
						key: 'index'
					}, {
						title: '类型',
						key: 'date'
					},
					{
						title: '一级',
						key: 'name'
					},
					{
						title: '二级',
						key: 'age'
					},
					{
						title: '合计',
						key: 'address'
					}
				],
				data5: [{
						index: 1,
						name: '服务',
						age: '催费',
						address: 42,
						date: '举报'
					},
					{
						index: 2,
						name: '服务',
						age: '催费',
						address: 42,
						date: '举报'
					},
					{
						index: 3,
						name: '服务',
						age: '催费',
						address: 42,
						date: '举报'
					},
					{
						index: 4,
						name: '服务',
						age: '催费',
						address: 42,
						date: '举报'
					},
					{
						index: 5,
						name: '服务',
						age: '催费',
						address: 42,
						date: '举报'
					},
					{
						index: 6,
						name: '服务',
						age: '催费',
						address: 42,
						date: '举报'
					}
				]
			}
		},
		mounted() {},
		methods: {
			handleSpan({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				// rowIndex === 0是第一行  columnIndex === 0是第一列  (rowIndex === 0 && columnIndex === 0) 表示的是第一行第一列
				// if (rowIndex === 0 && columnIndex === 0) {
				// 	return [1, 2];  //表示合并1行2列
				// } else if (rowIndex === 0 && columnIndex === 1) { // (rowIndex === 0 && columnIndex === 1) 是指第一行,第二列
				// 	return [0, 0];  //表示合并0行0列,即这是被合并的单元格   这里被合并的单元格一定要返回 return  [0, 0],否则会出现数据下串
				// }
				if (rowIndex === 0 && columnIndex === 1) { //第一行 第一列
					return {
						rowspan: 3,  //合并三行
						colspan: 1
					};
				} else if (rowIndex === 1 && columnIndex === 1 || rowIndex === 2 && columnIndex === 1) {
					// 为了防止串行,被合并的行或者列要返回[0,0],数组或者{}都可以  当前返回的是 第二行第二列和第三行第二列  索引是从0开始
					return {
						rowspan: 0,
						colspan: 0
					};
				}
			}
		}
	}
</script>
<style scoped>
	.tableclass {
		width: 100%;
		height: 100%;
	}
</style>

iView文档:https://www.iviewui.com/components/table

  • 1
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页

打赏

Bright2017

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值