Vue3:分析elementplus表格第一列序号hover变多选框实现思路

简介: Vue3:分析elementplus表格第一列序号hover变多选框实现思路

灵感来自Vue el-table 表格第一列序号与复选框hover切换

源码是通过Vue2+elementui去实现的,本篇是通过Vue3+elementplus实现,所以在代码上面有些许不同,但函数名一致

91f076afadd346a1819fee41c2464830.gif

实现思路:

①通过表头是多选框,我们可以判定这一列原本就是多选框,只是把多选框隐藏了然后显示序列号,所以在这一列的插槽中我们有两个元素,一个是多选框,一个是序列号

278723ee153d4f3f8d66e34206adb312.png

②通过图里这个效果我们可以直观的看到,是鼠标移上去之后序号变成多选框

③我们怎么去判定鼠标移上去了?通过表格的两个事件

64a5c77a00de4dc3bcf7c461cc7c5385.png

④我们可以设定一个参数columnCheckedId,用来判断什么时候该出现多选框,当然我们用的是v-if这个方法,当鼠标移上去之后,拿到行的索引,即row.index,如果这一列的类型是selection(多选框这一列的类型是selection)

19043f75565049d08a60e6a323d4d1c3.png

那么我们可以令columnCheckedId.value = row.index,当

<div v-if="columnCheckedId == row.id || checkedList[$index]">

时,多选框出现,第二个或条件checkedList[$index]是选中的时候出现多选框,即第五点👇👇👇

⑤还有一个情况多选框会出现,那就是选中的时候,不可能我们选中了鼠标移出该行后又变成序列号

所以我们设定一个checkedList数组来判定是否选中,绑定多选框的v-model,如果选中,即checkedList.value[index] == true,同时表格本身存在的多选框我们也置为true,通过

95157a5592ea47bd99e2778145e8165a.png

思路梳理:

我们把原来的多选框隐藏→

通过插槽添加一个伪选择框序列号

设置一个参数columnCheckedId和条件v-if="columnCheckedId == row.id ||

checkedList[$index]"判定是否出现伪多选框

通过cell-mouse-enter 鼠标移入事件拿到row.index→

columnCheckedId.value = row.index,此时columnCheckedId == row.id然后选择框出现→

如果选中,即checkedList.value[index] == true,此时columnCheckedId ==

checkedList[$index]鼠标即使不在此行,选择框依然存在,然后通过toggleRowSelection方法把真正的选择框值设为ture→

如果没有选中,通过cell-mouse-leave鼠标移出事件把columnCheckedId.value置为空,那么v-if条件不成立,伪选择框不出现,序列号出现

源码如下:

<el-table @cell-mouse-enter="mouseinrow"
          @cell-mouse-leave="mouseoutrow" />
<el-table-column type="selection" width="50" align="left">
  <!-- row 行 $index 当前行的索引 -->
  <template #default="{ row, $index }">
  <!-- 定义了一个columnCheckedId -->
  <!-- 鼠标移动上去的时候出现选择框,已经选择的时候也出现选择框 -->
    <div v-if="columnCheckedId == row.id ||checkedList[$index]">
    <!-- 定义了一个checkedList数组 -->
    <!-- 选中的时候checkedList[$index]==true 同时利用cellCheckbox方法把原来的真选择框置为true -->
      <el-checkbox
        v-model="checkedList[$index]"
        @change="cellCheckbox(row, $index)"
            ></el-checkbox>
    </div>
    <!-- 序列号 -->
        <span v-else>{{ $index + 1 }}</span>
  </template>
  // 定义了一个columnCheckedId 表示鼠标移入的行数
  const columnCheckedId = ref('')
  // 已经选择的框,可能有多个
  const checkedList = ref([])
  //鼠标移入表格当前行,就会出现row.index 便出现多选框
  const mouseinrow = (row, column, cell, event) => {
    // 如果这列是selection
    if (column.type == 'selection') {
      // row.index 行的索引 令columnCheckedId.value = row.index
      columnCheckedId.value = row.index
    }
  }
  // 鼠标移出表格当前行
  const mouseoutrow = (row, column, cell, event) => {
    // columnCheckedId.value 为空,选择框不出现,则不等于 row.index和checkedList.value[index]
    // 就出现$index+1 即当前行的索引
    columnCheckedId.value = ''
  }
  // toggleRowSelection 用于多选表格,切换某一行的选中状态,
  // 如果使用了第二个参数,则可直接设置这一行选中与否
  // 参数 row, selected
  // 鼠标移上去之后选择了,checkedList.value[index] == true
  const cellCheckbox = (row, index) => {
    if (checkedList.value[index]) {
    // 表格自带toggleRowSelection方法
      table.value.toggleRowSelection(row, true)
    } else {
      table.value.toggleRowSelection(row, false)
    }
  }

be364648ea094f2f9128fb92ea580f06.png

相关文章
|
27天前
|
开发工具 iOS开发 MacOS
基于Vite7.1+Vue3+Pinia3+ArcoDesign网页版webos后台模板
最新版研发vite7+vue3.5+pinia3+arco-design仿macos/windows风格网页版OS系统Vite-Vue3-WebOS。
211 11
|
11天前
|
JavaScript 安全
vue3使用ts传参教程
Vue 3结合TypeScript实现组件传参,提升类型安全与开发效率。涵盖Props、Emits、v-model双向绑定及useAttrs透传属性,建议明确声明类型,保障代码质量。
102 0
|
2月前
|
缓存 前端开发 大数据
虚拟列表在Vue3中的具体应用场景有哪些?
虚拟列表在 Vue3 中通过仅渲染可视区域内容,显著提升大数据列表性能,适用于 ERP 表格、聊天界面、社交媒体、阅读器、日历及树形结构等场景,结合 `vue-virtual-scroller` 等工具可实现高效滚动与交互体验。
324 1
|
2月前
|
缓存 JavaScript UED
除了循环引用,Vue3还有哪些常见的性能优化技巧?
除了循环引用,Vue3还有哪些常见的性能优化技巧?
173 0
|
3月前
|
JavaScript
vue3循环引用自已实现
当渲染大量数据列表时,使用虚拟列表只渲染可视区域的内容,显著减少 DOM 节点数量。
108 0
|
1月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
190 2
|
4月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
631 0
|
4月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
5月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
611 77
|
3月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
140 0

热门文章

最新文章