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

相关文章
|
1天前
|
存储 JavaScript 前端开发
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
|
1天前
|
前端开发 JavaScript
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
|
1天前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
|
4天前
|
JavaScript API
vue3知识点:ref函数
vue3知识点:ref函数
14 2
|
4天前
|
JavaScript 前端开发 API
vue3知识点:Vue3.0中的响应式原理和 vue2.x的响应式
vue3知识点:Vue3.0中的响应式原理和 vue2.x的响应式
11 0
|
2天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
2天前
|
缓存 JavaScript 搜索推荐
Vue SSR(服务端渲染)预渲染的工作原理
【10月更文挑战第23天】Vue SSR 预渲染通过一系列复杂的步骤和机制,实现了在服务器端生成静态 HTML 页面的目标。它为提升 Vue 应用的性能、SEO 效果以及用户体验提供了有力的支持。随着技术的不断发展,Vue SSR 预渲染技术也将不断完善和创新,以适应不断变化的互联网环境和用户需求。
20 9
|
1天前
|
缓存 JavaScript UED
Vue 中实现组件的懒加载
【10月更文挑战第23天】组件的懒加载是 Vue 应用中提高性能的重要手段之一。通过合理运用动态导入、路由配置等方式,可以实现组件的按需加载,减少资源浪费,提高应用的响应速度和用户体验。在实际应用中,需要根据具体情况选择合适的懒加载方式,并结合性能优化的其他措施,以打造更高效、更优质的 Vue 应用。
|
21小时前
|
JavaScript
如何在 Vue 中使用具名插槽
【10月更文挑战第25天】通过使用具名插槽,你可以更好地组织和定制组件的模板结构,使组件更具灵活性和可复用性。同时,具名插槽也有助于提高代码的可读性和可维护性。
7 2
|
21小时前
|
JavaScript
Vue 中的插槽
【10月更文挑战第25天】插槽的使用可以大大提高组件的复用性和灵活性,使你能够根据具体需求在组件中插入不同的内容,同时保持组件的结构和样式的一致性。
7 2