Vue.js 根据数据，进行Table单元格合并(原生方式以及element组件方式)

表格代码<table cellspacing="0" cellpadding="0" border="0" style="height: auto; width: 100%"><thead><tr><th>项

ITKouSyou

8575人浏览 · 2018-10-16 14:29:40

ITKouSyou · 2018-10-16 14:29:40 发布

表格代码

<table cellspacing="0" cellpadding="0" border="0" style="height: auto; width: 100%">
  <thead>
  <tr>
    <th>项目</th>
    <th>类型</th>
    <th>值</th>
  </tr>
  </thead>
  <tbody>
  <tr v-for="item in showList">
    <td :rowspan="item.keycount" v-if="item.keyshow">{{ item.key }}</td>
    <td :rowspan="item.keyDesccount" v-if="item.keyDescshow">{{ item.keyDesc}}</td>
    <td :rowspan="item.valuecount" v-if="item.valueshow">{{ item.value}}</td>
  </tr>
  </tbody>
</table>

开始使用了css的display和hidden标签去尝试，但是没有生效，所以就是用v-if来决定是否生成td

需要显示的list需要先通过下面的js方法进行处理，生成每个参数的对应count和show，count决定合并的个数，show则决定是否显示。当count为1时，说明相同的只有一个，所以show就是true，count大于2时show则为false。

/**
* 
* @param list 要处理的list
* @returns 返回处理好的list
*/
listHandle(list) {
  for (var key in list[0]) {
    var k = 0;
    while (k < list.length) {
      list[k][key + 'count'] = 1;
      list[k][key + 'show'] = true;
      for (var i = k + 1; i <= list.length - 1; i++) {
        if (list[k][key] == list[i][key] && list[k][key] != '') {
          list[k][key + 'count']++;
          list[k][key + 'show'] = true;
          list[i][key + 'count'] = 1;
          list[i][key + 'show'] = false;
        } else {
          break;
        }
      }
      k = i;
    }
  }
  return list
}

list数据举例

[
    {
        "key":"异地使用情况",
        "keyDesc":"最近常用通话地",
        "value":"淮北"
    },
    {
        "key":"异地使用情况",
        "keyDesc":"手机入网地",
        "value":"浙江杭州"
    },
    {
        "key":"互通号码情况",
        "keyDesc":"互通电话号码个数",
        "value":"6"
    },
    {
        "key":"互通号码情况",
        "keyDesc":"互通电话号码占比",
        "value":"21"
    },
    {
        "key":"主被叫通话详情",
        "keyDesc":"主叫通话时长",
        "value":"17124"
    },
    {
        "key":"主被叫通话详情",
        "keyDesc":"被叫通话时长",
        "value":"10800"
    },
    {
        "key":"主被叫通话详情",
        "keyDesc":"主叫被叫比例",
        "value":"158.56%"
    },
    {
        "key":"静默情况",
        "keyDesc":"最长连续静默天数",
        "value":"19"
    },
    {
        "key":"静默情况",
        "keyDesc":"月均手机静默天数",
        "value":"4.10"
    },
    {
        "key":"静默情况",
        "keyDesc":"连续静默天数超过15天的次数",
        "value":"1"
    },
    {
        "key":"静默情况",
        "keyDesc":"连续静默天数超过3天的次数",
        "value":"17"
    }
]

处理后showList数据

[
    {
        "key":"异地使用情况",
        "keyDesc":"最近常用通话地",
        "value":"淮北",
        "keycount":2,
        "keyshow":true,
        "keyDesccount":1,
        "keyDescshow":true,
        "valuecount":1,
        "valueshow":true,
        "listcount":1,
        "listshow":true
    },
    {
        "key":"异地使用情况",
        "keyDesc":"手机入网地",
        "value":"浙江杭州",
        "keycount":1,
        "keyshow":false,
        "keyDesccount":1,
        "keyDescshow":true,
        "valuecount":1,
        "valueshow":true,
        "listcount":1,
        "listshow":true
    },
    {
        "key":"互通号码情况",
        "keyDesc":"互通电话号码个数",
        "value":"6",
        "keycount":2,
        "keyshow":true,
        "keyDesccount":1,
        "keyDescshow":true,
        "valuecount":1,
        "valueshow":true,
        "listcount":1,
        "listshow":true
    },
    {
        "key":"互通号码情况",
        "keyDesc":"互通电话号码占比",
        "value":"21",
        "keycount":1,
        "keyshow":false,
        "keyDesccount":1,
        "keyDescshow":true,
        "valuecount":1,
        "valueshow":true,
        "listcount":1,
        "listshow":true
    },
    {
        "key":"主被叫通话详情",
        "keyDesc":"主叫通话时长",
        "value":"17124",
        "keycount":3,
        "keyshow":true,
        "keyDesccount":1,
        "keyDescshow":true,
        "valuecount":1,
        "valueshow":true,
        "listcount":1,
        "listshow":true
    },
    {
        "key":"主被叫通话详情",
        "keyDesc":"被叫通话时长",
        "value":"10800",
        "keycount":1,
        "keyshow":false,
        "keyDesccount":1,
        "keyDescshow":true,
        "valuecount":1,
        "valueshow":true,
        "listcount":1,
        "listshow":true
    },
    {
        "key":"主被叫通话详情",
        "keyDesc":"主叫被叫比例",
        "value":"158.56%",
        "keycount":1,
        "keyshow":false,
        "keyDesccount":1,
        "keyDescshow":true,
        "valuecount":1,
        "valueshow":true,
        "listcount":1,
        "listshow":true
    },
    {
        "key":"静默情况",
        "keyDesc":"最长连续静默天数",
        "value":"19",
        "keycount":4,
        "keyshow":true,
        "keyDesccount":1,
        "keyDescshow":true,
        "valuecount":1,
        "valueshow":true,
        "listcount":1,
        "listshow":true
    },
    {
        "key":"静默情况",
        "keyDesc":"月均手机静默天数",
        "value":"4.10",
        "keycount":1,
        "keyshow":false,
        "keyDesccount":1,
        "keyDescshow":true,
        "valuecount":1,
        "valueshow":true,
        "listcount":1,
        "listshow":true
    },
    {
        "key":"静默情况",
        "keyDesc":"连续静默天数超过15天的次数",
        "value":"1",
        "keycount":1,
        "keyshow":false,
        "keyDesccount":1,
        "keyDescshow":true,
        "valuecount":1,
        "valueshow":true,
        "listcount":1,
        "listshow":true
    },
    {
        "key":"静默情况",
        "keyDesc":"连续静默天数超过3天的次数",
        "value":"17",
        "keycount":1,
        "keyshow":false,
        "keyDesccount":1,
        "keyDescshow":true,
        "valuecount":1,
        "valueshow":true,
        "listcount":1,
        "listshow":true
    }
]

element的table组件中需要用到单元格合并的话。

假设要实现一下的表格

名称1	名称2	list集		名称5	名字6
		名称3	名称4
啊	a1	b1	c1	d1	呀
	a2	b2	c2	d2

数据

tempList: [{
  name1: '啊',
  list1: [
	{
	  name2: 'a1',
	  name3: 'b1',
	  name4: 'c1',
	  name5: 'd1'
	},
	{
	  name2: 'a2',
	  name3: 'b2',
	  name4: 'c2',
	  name5: 'd2'
	}
  ],
  name6: '呀'
}]

表格代码

其中子表格里用到了:header-cell-style="{display: 'none'}"使表格头隐藏了

  <el-table ref="table"
	:data="tempList"
	:span-method="objectSpanMethod"
	fit
	stripe>
	<el-table-column prop="name1" label="名称1"></el-table-column>
	<el-table-column label="名称2">
	  <template slot-scope="{row, $index}">
		<el-table ref="table"
		  :data="row.list1"
		  :header-cell-style="{display: 'none'}"
		  fit>
		  <el-table-column prop="name2"></el-table-column>
		  <el-table-column prop="name3"></el-table-column>
		  <el-table-column prop="name4"></el-table-column>
		  <el-table-column prop="name5"></el-table-column>
		</el-table>
	  </template>
	</el-table-column>
	<el-table-column label="list集" align="center">
	  <el-table-column label="名称3"></el-table-column>
	  <el-table-column label="名称4"></el-table-column>
	</el-table-column>
	<el-table-column label="名称5"></el-table-column>
	<el-table-column prop="name6" label="名称6"></el-table-column>
  </el-table>

表格里使用到的js方法

这里通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。也可以返回一个键名为rowspan和colspan的对象。

这里第2列开始到第5需要进行列的合并，所以columnIndex在等于1的时候需要设置列合并为4，也就是colspan:4，行不合并所以rowspan为1。而因为第二列设置了列的合并，所以要将第3列到第5列的单元格都隐藏掉，所以将rowspan和colspan都设为0。

  objectSpanMethod({ row, column, rowIndex, columnIndex }) {
	if (columnIndex === 1) {
		return {
		  rowspan: 1,
		  colspan: 4
		};
	} else if (columnIndex > 1 && columnIndex < 5) {
	  return {
		rowspan: 0,
		colspan: 0
	  }
	}
  }

效果图：

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

Vue

所有评论(0)

查看更多评论

ITKouSyou

@hx765287443

已为社区贡献4条内容