网站通栏设计素材品牌策略怎么写

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-tooltipv-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>

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