elementUi表格合并行数据并展示序号的方法是什么

发布时间:2023-04-25 10:07:34 作者:iii
来源:亿速云 阅读:188

今天小编给大家分享一下elementUi表格合并行数据并展示序号的方法是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

效果如下:属于同一个厂商的数据要合并成一行

elementUi表格合并行数据并展示序号的方法是什么

element官网对于合并行和列是这样说的:

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

实现合并行思路:需要一个数据来记录需要合并的行数据(数字几就代表合并几行,比如 [1, 2, 0, 1]就是第一行第四行不变,第二三行合并成一行),还要有一个变量来记录数组下标。 注意:后台返回的数据一定要有能区分唯一性的数据,来判断前后两条数据是否一样。 主要代码如下:

    <base-table
      :table-data="tableData"
      :table-title="tableTitle"
      :span-method="objectSpanMethod"
      max-height="600px"
      v-bind="$attrs"
    >
      <template slot-scope="scope" slot="serialNo">
        {{ scope.row.serialNo }}
      </template>
      ....
    </base-table>
const tableTitle = [
  {
    key: 'serialNo',
    title: '序号',
    align: 'center',
    width: '100',
    scopedSlots: { customRender: 'serialNo' }
  },
  {
    key: 'unionList',
    title: '厂商名称(编号)',
    align: 'center',
    width: '300px',
    scopedSlots: { customRender: 'unionList' }
  },
  {
    key: 'unionName',
    title: 'MQ厂商',
    tooltip: true,
    align: 'center'
  },
]
export default {
  data() {
    return {
      tableTitle,
      tableData: [],
      spanArr: [], // 存合并行数据的数组
      pos: 0,// 合并行数据数组下标
      rowIndex: 1 // 序号
    }
  },

  methods: {
    getTableData() {
      this.tableData = [
        {
          accessId: '1',
          id: 1,
          mqPassword: '1011',
          privateKey: '1011',
          publicKey: '1011',
          unionList: "[{\"union_name\":\"乐乐\",\"union_id\":\"200160\"}]",
          unionName: '1011'
        },
        {
          accessId: '2',
          id: 2,
          mqPassword: '1012',
          privateKey: '1012',
          publicKey: '1012',
          unionList: "[{\"union_name\":\"小太阳\",\"union_id\":\"200734\"},{\"union_name\":\"包子\",\"union_id\":\"200737\"}]",
          unionName: '1012'
        },
        {
          accessId: '3',
          id: 3,
          mqPassword: '1013',
          privateKey: '1013',
          publicKey: '1013',
          unionList: "[{\"union_name\":\"小太阳\",\"union_id\":\"200734\"},{\"union_name\":\"包子\",\"union_id\":\"200737\"}]",
          unionName: '1013'
        },
        {
          accessId: '4',
          id: 4,
          mqPassword: '1014',
          privateKey: '1014',
          publicKey: '1014',
          unionList: "[{\"union_name\":\"测试\",\"union_id\":\"200160\"}]",
          unionName: '1014'
        },
      ]
      this.getSpanArr(this.tableData) // 获取合并单元格数据和序号
    },
    getSpanArr(data) {
    // 重新查询后,要清空行数据数组、序号重置为1
      this.spanArr = []
      this.rowIndex = 1
      // 遍历数据,判断前后两条数据是否相同
      for (let i = 0; i < data.length; i++) {
        data[i].unionList = JSON.parse(data[i].unionList)
        data[i].unionArr = data[i].unionList.map(i => i.union_id).join(',')
        if (i === 0) {
          this.spanArr.push(1)
          this.pos = 0
          data[i].serialNo = this.rowIndex
          this.rowIndex++
        } else {
          // 判断当前元素与上一元素是否相同
          if (data[i].unionArr === data[i - 1].unionArr) {
            this.spanArr[this.pos] += 1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            this.pos = i
            data[i].serialNo = this.rowIndex
            this.rowIndex ++
          }
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 合并操作和厂商名称
      if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        // rowspan和colspan都为0,则表示这一行不显示,[x, 1]则表示合并了多少行
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },
  }
}

以上就是“elementUi表格合并行数据并展示序号的方法是什么”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。

推荐阅读:
  1. ElementUI中tree控件的坑怎么解决
  2. Vue+ElementUI+Springboot的基础知识是什么

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

elementui

上一篇:vue-element-admin怎么从mock数据过渡到使用后台接口

下一篇:Python sklearn怎么对文本数据进行特征化提取

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》