利用 Vue 3、Element Plus 和 Table：本地缓存表格列拖拽

前言

对于数据密集型应用，拥有一个灵活易用的表格视图至关重要。Element Plus 提供了丰富的组件库，其中包括强大的 Table 组件，允许开发人员轻松创建和自定义表格。本文将重点介绍如何利用 Vue 3、Element Plus 和 Table 实现一个本地缓存的表格列拖拽功能，让用户可以自定义表格列的顺序和宽度，并将其持久化到本地存储中。

技术栈

• Vue 3
• Element Plus
• LocalStorage

实施

1. 安装依赖

首先，安装必要的依赖：

npm install vue3 element-plus

2. 创建 Vue 组件

创建一个名为 DataTable.vue 的 Vue 组件，用于表示我们的表格：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      v-for="column in tableColumns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label"
      :width="column.width"
      resizable
      @resizable-change="handleResize"
    />
  </el-table>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
  setup() {
    const tableData = ref([])
    const tableColumns = ref([
      { prop: 'name', label: '姓名', width: 100 },
      { prop: 'age', label: '年龄', width: 80 },
      { prop: 'address', label: '地址', width: 120 }
    ])

    // 监听列宽变化并更新本地存储
    const handleResize = (column, width) => {
      column.width = width
      localStorage.setItem('tableColumns', JSON.stringify(tableColumns.value))
    }

    // 从本地存储加载列宽
    onMounted(() => {
      const storedColumns = JSON.parse(localStorage.getItem('tableColumns'))
      if (storedColumns) {
        tableColumns.value = storedColumns
      }
    })

    return { tableData, tableColumns, handleResize }
  }
}
</script>

解析

• 该组件使用 Element Plus 的 <el-table> 和 <el-table-column> 组件创建了一个表格。
• 我们定义了一个 tableColumns 响应式对象，用于存储表格列的属性，包括 prop（列的键）、label（列的标题）、width（列的宽度）和 resizable（允许列拖拽）。
• handleResize 方法负责监听列宽变化并将其更新到本地存储中。
• 在 onMounted 生命周期钩子中，我们从本地存储加载先前保存的列宽。

用法

在你的 Vue 应用中，你可以使用 DataTable 组件：

<template>
  <data-table />
</template>

<script>
import DataTable from './DataTable.vue'

export default {
  components: { DataTable }
}
</script>

结果

此解决方案允许用户拖拽表格列以调整它们的顺序和宽度。调整后的列宽将被持久化到本地存储中，并在页面刷新后恢复。