element vue table表格如何合并行，列名顺序如何更换_vue3table合并行后序号重新排序

我的需求

1. 如图，每个人的ID都是唯一的，如果查询条件是人员，前两列，相同姓名合并，相同ID合并
   
2. 如图，如果查询条件是卡号，把卡号从第三列换到第一列，并且仅第一列，相同卡号合并，
   

我的实现

1. 表格用v-for实现，
   :data=“list” 中list是从后端获取到的表格数据；
   :span-method=“arraySpanMethod” 中arraySpanMethod方法是合并行的方法，可搭配elementui官网查看；
   columns 是写在data中的表头的数组，把第三列换到第一列就去操作这个数组
   （详细操作请继续往下看）

      <!-- 表格控件容器 -->
      <div class="table-container">
        <el-table
          ref="singleTable"
          v-loading="listLoading"
          highlight-current-row
          :data="list"
          border
          height="calc(100%)"
          :fit="true"
          :span-method="arraySpanMethod"
        >
          <el-table-column
            v-for="(item,index) in columns"
            :key="index"
            :label="item.label"
            :align="item.align"
            :prop="item.value"
            :formatter="item.formatter"
          />
          <el-table-column
            label="操作"
            fixed="right"
            align="center"
            class-name="small-padding fixed-width"
            width="150px"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="getDetails(scope)"
              >详情</el-button>
            </template>
          </el-table-column>

        </el-table>
      </div>

<script>
export default {
	data() {
	  list: [],
	  // 表头
      columns: [{
        label: '姓名',
        value: 'EmployeeName',
        align: 'center'
      },
      {
        label: '员工ID',
        value: 'EmployeeID',
        align: 'center'
      },
      {
        label: '卡号',
        value: 'PositionCardID',
        align: 'center'
      },
      {
        label: '开始日期',
        value: 'StartDate',
        align: 'center'
      },
      {
        label: '结束日期',
        value: 'EndDate',
        align: 'center'
      }]
	}
}
</script>
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

2. arraySpanMethod方法，以及getSpanArr方法，getSpanArr方法是处理数据用来记录哪些地方需要合并的；

	<script>
	export default {
		data() {
			// getSpanArr方法中需要用到的两个属性
      		spanArr: [],
      		pos: 0,
		}
	}
	</script>
//方法都是写在method里的，我只简写了
//data参数是所有数据，attr参数是需要被合并的字段
	getSpanArr(data, attr) {
      console.log('getSpanArr方法执行')
      // console.log(data)
      // console.log(attr)
      for (let i = 0; i < data.length; i++) { // 第一列
        if (i === 0) {
          this.spanArr.push(1)
          this.pos = 0
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i][attr] === data[i - 1][attr]) {
            this.spanArr[this.pos] += 1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            this.pos = i
          }
        }
      }
      console.log('this.spanArr')
      console.log(this.spanArr)
    },
     // 合并行的方法
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          // _row = 0，_col = 0 表示这一次不合并，不显示，
          // _row = 2，_col = 1 表示这一次合并第一列的两行
          rowspan: _row,
          colspan: _col
        }
      }
      //第二个判断是看当前是哪种查询方式，查卡的话第二列不合并
      if (columnIndex === 1 && !this.searchByCard) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          // _row = 0，_col = 0 表示这一次不合并，不显示，
          // _row = 2，_col = 1 表示这一次合并第一列的两行
          rowspan: _row,
          colspan: _col
        }
      }
    },

//在查询方法执行后获得到所有数据时，去执行getSpanArr方法就好了，要合并哪一列就把哪一列的字段名传进来

		  if (this.searchByCard) {
            this.getSpanArr(this.list, 'PositionCardID')
          } else {
            this.getSpanArr(this.list, 'EmployeeID')
          }

// 注意：// 每次重新getlist时将合并格子的这两属性重置
      this.spanArr = []
      this.pos = 0
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
57
58
59
60
61
62
63
64
65
66
67
68
69

3. 每次更换查询条件（人员或卡号），触发方法，对表头的数组进行操作，更换列的顺序

	SelectOptionsChanged() {
      console.log('searchTypeChange')
      //更换搜索条件
      this.SearchType === 0 ? (this.searchByCard = true) : (this.searchByCard = false)
      //每次更换都先把‘卡号’列，存到temp中，然后在数组中删掉
      for (var i = 0; i < this.columns.length; i++) {
        if (this.columns[i].label === '卡号') {
          var temp = this.columns[i] // 声明一个对象保存符合要求的数据
          this.columns.splice(i, 1)// 先把符合条件的数据从当前数组中删除
          break
        }
      }
      //判断是哪种查询方式，然后把卡号列即temp放到数组的第一个或第三个
      // 如果是根据定位卡查询，将卡号列放到第一列
      if (this.searchByCard) {
        this.columns.unshift(temp)// 通过unshift函数把符合要求的数据放到第一位
        // console.log('this.columns')
        // console.log(this.columns)
      } else {
        this.columns.splice(2, 0, temp) // 通过splice函数把符合要求的数据放到第三位
      }

      this.getList()  //更换查询条件后重新查询一次
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24