el-table表格实现横竖双表头，双击输入框编辑-编程知识

el-table表格实现横竖双表头，双击输入框编辑

1. 横竖双表头

<script setup lang="ts">const tableData = [{name: "Tom",date: "2016-05-03",address: "No. 189, Grove St, Los Angeles",},{date: "2016-05-02",name: "jack",address: "No. 189, Grove St, Los Angeles",},{date: "2016-05-04",name: "marry",address: "No. 189, Grove St, Los Angeles",},{date: "2016-05-01",name: "sandy",address: "No. 189, Grove St, Los Angeles",},
];const column = [{prop: "date",label: "日期",},{ prop: "address", label: "地址" },
];
</script>
<template><main><div class="table"><el-table :data="tableData" border><el-table-column width="150"><template #header><div style="text-align: right">信息</div><div>名字</div></template><template #default="scope">{{ scope.row.name }}</template></el-table-column><el-table-columnv-for="item in column":prop="item.prop":label="item.label"align="center"/></el-table></div></main>
</template>

表头斜线效果注意看css

.table {width: 800px;height: 600px;:deep(.el-table) {thead {tr:last-of-type {th:first-of-type:before {content: "";position: absolute;width: 1px;background-color: #ebeef5;display: block;height: 182px; //根据情况调整bottom: 0;right: 0; //根据情况调整transform: rotate(-68deg); //根据情况调整transform-origin: bottom;}}}}}

效果图
在这里插入图片描述

2. 双击输入框编辑

以双击名字出现输入框编辑为例

<script setup lang="ts">
import { ref } from 'vue';const tableData = [{name: "Tom",date: "2016-05-03",address: "No. 189, Grove St, Los Angeles",},{date: "2016-05-02",name: "jack",address: "No. 189, Grove St, Los Angeles",},{date: "2016-05-04",name: "marry",address: "No. 189, Grove St, Los Angeles",},{date: "2016-05-01",name: "sandy",address: "No. 189, Grove St, Los Angeles",},
];const column = [{prop: "date",label: "日期",},{ prop: "address", label: "地址" },
];// 编辑的项索引
const editIndex = ref(-1);// 失焦/键盘回车键 隐藏输入框
const hideInp = () => {editIndex.value = -1
}</script>
<template><main><div class="table"><el-table :data="tableData" border><el-table-column width="150"><template #header><div style="text-align: right">信息</div><div>名字</div></template><template #default="scope"><div @dblclick="editIndex = scope.$index" style="text-align: center"><span v-if="editIndex === scope.$index"><el-inputv-model="scope.row.name"v-focus@blur="hideInp"@keydown.enter="hideInp"/></span><span v-else>{{ scope.row.name }}</span></div></template></el-table-column><el-table-columnv-for="item in column":prop="item.prop":label="item.label"/></el-table></div></main>
</template>

注意，这里的v-focus是自定义指令，用来保证输入框自动获取焦点，需在main.ts中进行注册

const app = createApp(App)
// 全局注册输入框入焦指令
app.directive('focus', {mounted(el) {const input = el.getElementsByTagName('input')[0];input.focus();},
});app.use(router).use(ElementPlus).mount('#app')