header.vue
3.01 KB
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<template>
<div class="table-content">
<!-- 采用的原生表格 -->
<table align="center">
<thead>
<tr>
<th v-for="item in editTestCellTableTHeaderConfig" :key="item">{{ item }}</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in tableArray.content" :key="index">
<td>
{{ index + 1 }}
</td>
<td style="width: 12vw">
<a-input style="width: 12vw" placeholder="请输入" v-model:value="item.key" />
</td>
<td style="width: 12vw">
<a-input style="width: 12vw" placeholder="请输入" v-model:value="item.value" />
</td>
<td style="width: 4vw">
<div>
<Button type="dashed" @click="add(item, index)">
<template #icon><PlusOutlined /></template
></Button>
<Button type="dashed" style="margin-left: 5px" @click="remove(index)">
<template #icon> <MinusOutlined /></template>
</Button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script lang="ts" setup name="editCellTable">
import { reactive, nextTick } from 'vue';
import { Button } from 'ant-design-vue';
import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue';
import { editTestCellTableTHeaderConfig } from '../../config';
import { tableItems } from '../../types';
defineProps({
method: {
type: String,
},
});
const tableArray = reactive<{
content: tableItems[];
}>({
content: [
{
key: '',
value: '',
},
],
});
// 新增
const add = (_, index: number) => {
tableArray.content.splice(index + 1, 0, {
key: '',
value: '',
});
};
// 减少
const remove = (index: number) => {
if (tableArray.content.length !== 1) {
tableArray.content.splice(index, 1);
}
};
//获取数据
const getValue = () => {
return tableArray.content;
};
//设置数据
const setValue = async (data) => {
await nextTick();
tableArray.content = data;
};
//重置数据
const resetValue = () => {
tableArray.content = [];
tableArray.content.push({
key: '',
value: '',
});
nextTick(() => {});
};
defineExpose({
getValue,
setValue,
resetValue,
});
</script>
<style scoped lang="less">
@table-color: #e5e7eb;
.table-border-color {
border: 1px solid #e5e7eb;
text-align: center;
}
.table-content {
overflow-x: auto;
table {
border-collapse: collapse;
width: 35vw;
&:extend(.table-border-color);
}
table thead {
white-space: nowrap;
}
table td {
padding: 5px;
white-space: nowrap;
&:extend(.table-border-color);
}
table th {
padding: 5px;
&:extend(.table-border-color);
}
}
</style>