炸裂！Vue3 中使用 Hook 实现按住 Shift 快速勾选el-table 功能，太丝滑了！-阿里云开发者社区

最近，我的老板又给我布置了一个神奇的任务——实现一个按住 Shift 键快速勾选 el-table 的功能。

听到这个需求时，我差点以为是要我编写一个类似 Excel 的表格功能。不过，作为一个 Vue3 的爱好者，这个挑战让我十分兴奋。

于是，我带上我的好伙伴 Vue3 和 Element Plus，一头扎进了代码的世界。今天，我将和大家分享我是如何一步步实现这个功能的，希望能对大家有所帮助。

项目初始化

首先，我们需要初始化一个 Vue3 项目。如果你还没有安装 Vue CLI，可以通过以下命令安装：

npm install -g @vue/cli

然后，创建一个新的 Vue 项目：

vue create shift-select-table cd shift-select-table

选择默认配置或者根据自己的需求进行配置。创建完成后，进入项目目录并启动开发服务器：

npm run serve

安装和配置 Element Plus

为了使用 Element Plus，我们需要先安装它：

npm install element-plus --save

在 src/main.js 中引入 Element Plus：

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

创建基础 el-table 组件

接下来，我们创建一个基础的 el-table 组件，用于展示数据列表。

1. 创建组件文件

在 src/components 目录下创建一个 ShiftSelectTable.vue 文件，并添加以下内容：

<template>
  <el-table
    :data="tableData"
    @selection-change="handleSelectionChange"
    @row-click="handleRowClick"
    ref="tableRef"
    border
    style="width: 100%">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>
<script setup>
import { ref } from 'vue';
const tableRef = ref(null);
const tableData = [
  { date: '2023-01-01', name: 'John Smith', address: 'New York No. 1 Lake Park' },
  { date: '2023-01-02', name: 'Jane Doe', address: 'London No. 1 Lake Park' },
  { date: '2023-01-03', name: 'Sam Green', address: 'Sidney No. 1 Lake Park' },
  // ... 更多数据
];
const handleSelectionChange = (val) => {
  console.log('selected rows:', val);
};
const handleRowClick = (row, column, event) => {
  console.log('row clicked:', row);
};
</script>

在这个组件中，我们创建了一个基本的 el-table，并绑定了一些事件处理函数。

实现按住 Shift 快速勾选功能

为了实现按住 Shift 键快速勾选行的功能，我们需要在行点击时记录当前的选择状态，并在下一次点击时根据 Shift 键的状态选择多个行。

2. 更新组件逻辑

我们将 handleRowClick 函数更新为实现按住 Shift 快速勾选的逻辑：

<script setup>
import { ref, reactive } from 'vue';
const tableRef = ref(null);
const tableData = [
  { date: '2023-01-01', name: 'John Smith', address: 'New York No. 1 Lake Park' },
  { date: '2023-01-02', name: 'Jane Doe', address: 'London No. 1 Lake Park' },
  { date: '2023-01-03', name: 'Sam Green', address: 'Sidney No. 1 Lake Park' },
  // ... 更多数据
];
const state = reactive({
  lastSelectedIndex: null,
  selectedRows: []
});
const handleSelectionChange = (val) => {
  state.selectedRows = val;
};
const handleRowClick = (row, column, event) => {
  const rowIndex = tableData.indexOf(row);
  if (event.shiftKey && state.lastSelectedIndex !== null) {
    const start = Math.min(state.lastSelectedIndex, rowIndex);
    const end = Math.max(state.lastSelectedIndex, rowIndex);
    const rowsToSelect = tableData.slice(start, end + 1);
    tableRef.value.toggleRowSelection(rowsToSelect, true);
  } else {
    tableRef.value.toggleRowSelection(row);
  }
  state.lastSelectedIndex = rowIndex;
};
</script>

在这个更新后的组件中，我们添加了一个 state 对象，用于记录最后一次选择的行索引和当前选中的行。当点击行时，如果按住了 Shift 键并且有记录上一次选择的行索引，我们将选择范围内的所有行。

使用 Hook 封装功能

为了使代码更加简洁和可复用，我们将按住 Shift 快速勾选的功能封装成一个 Hook。

3. 创建 Hook 文件

在 src/hooks 目录下创建一个 useShiftSelect.js 文件，并添加以下内容：

import { reactive, ref } from 'vue';
export default function useShiftSelect(tableData) {
  const tableRef = ref(null);
  const state = reactive({
    lastSelectedIndex: null,
    selectedRows: []
  });
  const handleSelectionChange = (val) => {
    state.selectedRows = val;
  };
  const handleRowClick = (row, column, event) => {
    const rowIndex = tableData.indexOf(row);
    if (event.shiftKey && state.lastSelectedIndex !== null) {
      const start = Math.min(state.lastSelectedIndex, rowIndex);
      const end = Math.max(state.lastSelectedIndex, rowIndex);
      const rowsToSelect = tableData.slice(start, end + 1);
      tableRef.value.toggleRowSelection(rowsToSelect, true);
    } else {
      tableRef.value.toggleRowSelection(row);
    }
    state.lastSelectedIndex = rowIndex;
  };
  return {
    tableRef,
    state,
    handleSelectionChange,
    handleRowClick
  };
}

4. 更新组件使用 Hook

在 ShiftSelectTable.vue 组件中使用我们刚刚封装的 Hook：

最近，我的老板又给我布置了一个神奇的任务——实现一个按住 Shift 键快速勾选 el-table 的功能。

听到这个需求时，我差点以为是要我编写一个类似 Excel 的表格功能。不过，作为一个 Vue3 的爱好者，这个挑战让我十分兴奋。

于是，我带上我的好伙伴 Vue3 和 Element Plus，一头扎进了代码的世界。今天，我将和大家分享我是如何一步步实现这个功能的，希望能对大家有所帮助。

图片

项目初始化
首先，我们需要初始化一个 Vue3 项目。如果你还没有安装 Vue CLI，可以通过以下命令安装：

npm install -g @vue/cli
然后，创建一个新的 Vue 项目：

vue create shift-select-table
cd shift-select-table
选择默认配置或者根据自己的需求进行配置。创建完成后，进入项目目录并启动开发服务器：

npm run serve
安装和配置 Element Plus
为了使用 Element Plus，我们需要先安装它：

npm install element-plus --save
在 src/main.js 中引入 Element Plus：

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');
创建基础 el-table 组件
接下来，我们创建一个基础的 el-table 组件，用于展示数据列表。

1. 创建组件文件
在 src/components 目录下创建一个 ShiftSelectTable.vue 文件，并添加以下内容：

<template>
  <el-table
    :data="tableData"
    @selection-change="handleSelectionChange"
    @row-click="handleRowClick"
    ref="tableRef"
    border
    style="width: 100%">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>

<script setup>
import { ref } from 'vue';

const tableRef = ref(null);
const tableData = [
  { date: '2023-01-01', name: 'John Smith', address: 'New York No. 1 Lake Park' },
  { date: '2023-01-02', name: 'Jane Doe', address: 'London No. 1 Lake Park' },
  { date: '2023-01-03', name: 'Sam Green', address: 'Sidney No. 1 Lake Park' },
  // ... 更多数据
];

const handleSelectionChange = (val) => {
  console.log('selected rows:', val);
};

const handleRowClick = (row, column, event) => {
  console.log('row clicked:', row);
};
</script>
在这个组件中，我们创建了一个基本的 el-table，并绑定了一些事件处理函数。

实现按住 Shift 快速勾选功能
为了实现按住 Shift 键快速勾选行的功能，我们需要在行点击时记录当前的选择状态，并在下一次点击时根据 Shift 键的状态选择多个行。

2. 更新组件逻辑
我们将 handleRowClick 函数更新为实现按住 Shift 快速勾选的逻辑：

<script setup>
import { ref, reactive } from 'vue';

const tableRef = ref(null);
const tableData = [
  { date: '2023-01-01', name: 'John Smith', address: 'New York No. 1 Lake Park' },
  { date: '2023-01-02', name: 'Jane Doe', address: 'London No. 1 Lake Park' },
  { date: '2023-01-03', name: 'Sam Green', address: 'Sidney No. 1 Lake Park' },
  // ... 更多数据
];

const state = reactive({
  lastSelectedIndex: null,
  selectedRows: []
});

const handleSelectionChange = (val) => {
  state.selectedRows = val;
};

const handleRowClick = (row, column, event) => {
  const rowIndex = tableData.indexOf(row);

  if (event.shiftKey && state.lastSelectedIndex !== null) {
    const start = Math.min(state.lastSelectedIndex, rowIndex);
    const end = Math.max(state.lastSelectedIndex, rowIndex);

    const rowsToSelect = tableData.slice(start, end + 1);
    tableRef.value.toggleRowSelection(rowsToSelect, true);
  } else {
    tableRef.value.toggleRowSelection(row);
  }

  state.lastSelectedIndex = rowIndex;
};
</script>
在这个更新后的组件中，我们添加了一个 state 对象，用于记录最后一次选择的行索引和当前选中的行。当点击行时，如果按住了 Shift 键并且有记录上一次选择的行索引，我们将选择范围内的所有行。

使用 Hook 封装功能
为了使代码更加简洁和可复用，我们将按住 Shift 快速勾选的功能封装成一个 Hook。

3. 创建 Hook 文件
在 src/hooks 目录下创建一个 useShiftSelect.js 文件，并添加以下内容：

import { reactive, ref } from 'vue';

export default function useShiftSelect(tableData) {
  const tableRef = ref(null);
  const state = reactive({
    lastSelectedIndex: null,
    selectedRows: []
  });

  const handleSelectionChange = (val) => {
    state.selectedRows = val;
  };

  const handleRowClick = (row, column, event) => {
    const rowIndex = tableData.indexOf(row);

    if (event.shiftKey && state.lastSelectedIndex !== null) {
      const start = Math.min(state.lastSelectedIndex, rowIndex);
      const end = Math.max(state.lastSelectedIndex, rowIndex);

      const rowsToSelect = tableData.slice(start, end + 1);
      tableRef.value.toggleRowSelection(rowsToSelect, true);
    } else {
      tableRef.value.toggleRowSelection(row);
    }

    state.lastSelectedIndex = rowIndex;
  };

  return {
    tableRef,
    state,
    handleSelectionChange,
    handleRowClick
  };
}
4. 更新组件使用 Hook
在 ShiftSelectTable.vue 组件中使用我们刚刚封装的 Hook：

<template>
  <el-table
    :data="tableData"
    @selection-change="handleSelectionChange"
    @row-click="handleRowClick"
    ref="tableRef"
    border
    style="width: 100%">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>

<script setup>
import useShiftSelect from '../hooks/useShiftSelect';

const tableData = [
  { date: '2023-01-01', name: 'John Smith', address: 'New York No. 1 Lake Park' },
  { date: '2023-01-02', name: 'Jane Doe', address: 'London No. 1 Lake Park' },
  { date: '2023-01-03', name: 'Sam Green', address: 'Sidney No. 1 Lake Park' },
  // ... 更多数据
];

const { tableRef, state, handleSelectionChange, handleRowClick } = useShiftSelect(tableData);
</script>
通过使用 useShiftSelect Hook，我们使得组件代码更加简洁，同时实现了按住 Shift 快速勾选功能。

总结
通过本文的介绍，我们一步步实现了在 Vue3 中使用 Hook 实现按住 Shift 快速勾选 el-table 的功能。

我们首先初始化了 Vue3 项目，并安装了 Element Plus。接着，我们创建了基础的 el-table 组件，并实现了按住 Shift 快速勾选的逻辑。最后，我们将功能封装成 Hook，使代码更加简洁和可复用。

希望通过本文的介绍，大家能够更好地理解和应用Vue3 中的 Hook 技术，在实际项目中实现更强大和灵活的功能。

通过使用 useShiftSelect Hook，我们使得组件代码更加简洁，同时实现了按住 Shift 快速勾选功能。

总结

通过本文的介绍，我们一步步实现了在 Vue3 中使用 Hook 实现按住 Shift 快速勾选 el-table 的功能。

我们首先初始化了 Vue3 项目，并安装了 Element Plus。接着，我们创建了基础的 el-table 组件，并实现了按住 Shift 快速勾选的逻辑。最后，我们将功能封装成 Hook，使代码更加简洁和可复用。

希望通过本文的介绍，大家能够更好地理解和应用Vue3 中的 Hook 技术，在实际项目中实现更强大和灵活的功能。

炸裂！Vue3 中使用 Hook 实现按住 Shift 快速勾选el-table 功能，太丝滑了！

项目初始化

安装和配置 Element Plus

创建基础 el-table 组件

1. 创建组件文件

实现按住 Shift 快速勾选功能

2. 更新组件逻辑

使用 Hook 封装功能

3. 创建 Hook 文件

4. 更新组件使用 Hook

总结

热门文章

最新文章

相关课程

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

炸裂！Vue3 中使用 Hook 实现按住 Shift 快速勾选el-table 功能，太丝滑了！

项目初始化

安装和配置 Element Plus

创建基础 el-table 组件

1. 创建组件文件

实现按住 Shift 快速勾选功能

2. 更新组件逻辑

使用 Hook 封装功能

3. 创建 Hook 文件

4. 更新组件使用 Hook

总结

热门文章

最新文章

相关课程

相关电子书