Element UI 中动态列及动态列排序的实现方法

2024-02-19 09:32:17

Element UI 是一个非常流行的前端 UI 框架，提供了丰富的组件库，可以帮助开发者快速构建出美观实用的用户界面。在实际项目中，我们经常需要在表格中使用动态列，即列数和列名都是动态生成的。这种情况下，使用 Element UI 的普通表格排序功能就无法满足需求了。

为了实现动态列及动态列排序，我们需要对 Element UI 的表格组件进行一些改造。首先，我们需要创建一个自定义指令，用于动态生成列头和列内容。其次，我们需要修改表格组件的排序算法，使其能够根据动态生成的列进行排序。

自定义指令

Vue.directive('dynamic-table-column', {
  bind: function (el, binding, vnode) {
    const columns = binding.value.columns
    const data = binding.value.data

    // 动态生成列头
    const header = document.createElement('tr')
    columns.forEach(column => {
      const th = document.createElement('th')
      th.innerText = column.label
      header.appendChild(th)
    })

    // 动态生成列内容
    data.forEach(row => {
      const tr = document.createElement('tr')
      columns.forEach(column => {
        const td = document.createElement('td')
        td.innerText = row[column.prop]
        tr.appendChild(td)
      })
    })

    // 将动态生成的列头和列内容添加到表格中
    el.appendChild(header)
    el.appendChild(body)
  }
})

修改排序算法

Vue.component('el-table', {
  data() {
    return {
      sortedColumn: null,
      sortOrder: null
    }
  },
  methods: {
    handleSort(column, order) {
      this.sortedColumn = column
      this.sortOrder = order

      // 根据动态生成的列进行排序
      this.data.sort((a, b) => {
        const valueA = a[column.prop]
        const valueB = b[column.prop]

        if (order === 'ascending') {
          return valueA < valueB ? -1 : 1
        } else {
          return valueA > valueB ? -1 : 1
        }
      })
    }
  },
  template: `
    <table class="el-table">
      <template v-for="(column, index) in columns">
        <th v-el:header :key="index">
          {{ column.label }}
          <i v-if="sortedColumn === column && sortOrder === 'ascending'" class="el-icon-caret-top"></i>
          <i v-if="sortedColumn === column && sortOrder === 'descending'" class="el-icon-caret-bottom"></i>
        </th>
      </template>
      <tbody>
        <tr v-for="(row, index) in data" :key="index">
          <td v-for="(column, index) in columns" :key="index">{{ row[column.prop] }}</td>
        </tr>
      </tbody>
    </table>
  `
})