vue3+elementplus中的table表格双击某一个td展开新的一行，隐藏展开小图标

vue3+elementplus中的table表格双击某一个td展开新的一行，隐藏展开小图标

1.隐藏展开小图标，设置 width="1"，样式display: none;

<el-table-column type="expand" width="1">

//内容,通过v-if来判断显示/隐藏
<template #default="props">
    <div class="Orderdetail" v-if="props.row.columnshow"></div>
</template>
</el-table-column>
<style  scoped lang="scss">
::v-deep(.el-table__expand-column .cell) {
  display: none;
}
</style>

2.双击展开,给每排数据加一个标识columnshow

<script setup lang="ts" name="dayTable">

records = records.map(function (item: any) {
       return { ...item, columnshow: false };
     });
</script>

3.绑定事件 ，双击打开/关闭详情，移上去出现文字提示（双击打开/关闭详情），移除隐藏提示

 <el-table
       :default-expand-all="true"
        @cell-dblclick="handleTableRow"
        @cell-mouse-enter="enterSelectionRows"
        @cell-mouse-leave="leaveSelectionRows"
            ></el-table>
 <el-tooltip
              v-model:visible="visible"
              content="双击展开详情/关闭 "
              placement="top"
              trigger="click"
              virtual-triggering
              :virtual-ref="triggerRef"
            />

<script setup lang="ts" name="dayTable">
//双击
const handleTableRow = (row: any, event: any, column: any) => {
  row.columnshow = !row.columnshow;
  visible.value = false;
};
const visible = ref(false);
// 鼠标进入表格行的回调函数
const enterSelectionRows = (row: any, column: any, cell: any, event: any) => {
  if (!row.hasAuth) {
    visible.value = true;
    return;
  }
};
// 鼠标离开表格行的回调函数
const leaveSelectionRows = (row: any) => {
  visible.value = false;
};
const triggerRef = ref({
  getBoundingClientRect() {
    return position.value;
  },
});

const position = ref({
  top: 0,
  left: 0,
  bottom: 0,
  right: 0,
});

const mousemoveHandler = (e: any) => {
  position.value = DOMRect.fromRect({
    width: 0,
    height: 0,
    x: e.clientX,
    y: e.clientY,
  });
};
onMounted(() => {
  document.addEventListener("mousemove", mousemoveHandler);
});

onUnmounted(() => {
  document.removeEventListener("mousemove", mousemoveHandler);
});
</script>

好了，就这样就可以啦！！！