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-column
					v-for="item in column"
					:prop="item.prop"
					:label="item.label"
					align="center"
				/>
			</el-table>
		</div>
	</main>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

表头斜线效果注意看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;
				}
			}
		}
	}
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

效果图

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-input
									v-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-column
					v-for="item in column"
					:prop="item.prop"
					:label="item.label"
				/>
			</el-table>
		</div>
	</main>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

• 注意，这里的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')
1
2
3
4
5
6
7
8
9
10