dev类似于excel的数据编辑

 着实这个不是我末了的效果，只是中心demo，由于我的场景数据量很大，2w左右，有数据归并，我更倾向于el-table是实现，但不想el-input不停表现，想用if-else 去做潜伏，但是用type=textarea发现高度适配有点标题，此中做了两种实验：
（1）失去核心和获取核心获取容器的高度再赋值给 textarea
（2）textarea点位设置  position: absolute设置表现和潜伏样式，但是同样发现必要很多歌el-input做表现潜伏 ，但是我不想这么处置惩罚。
（3）用dev去实现el-table，用flex 或grid 结构去实现
以下为dev用flex去实现的方法

2. <template>
3.   <div class="page">
4.     <div class="table table-input-box">
5.       <div
6.         style="flex: 1"
7.         v-for="(item, index) in tableData"
8.         :key="index"
9.         class="textarea-item"
10.       >
11.         <div class="textarea-row">
12.           <div
13.             style="flex: 1"
14.             @click.prevent="inputBlurHandler($event, item)"
15.             class="column-item item1"
16.           >
17.             <el-input
18.               class="item__input"
19.               v-model="tableData[index].date"
20.               type="textarea"
21.               resize="none"
22.               placeholder="请输入内容"
23.               autosize
24.             ></el-input>
25.           </div>
26.           <div
27.             style="flex: 1"
28.             @click.prevent="inputBlurHandler($event, item)"
29.             class="column-item item2"
30.           >
31.             <el-input
32.               class="item__input"
33.               v-model="tableData[index].name"
34.               type="textarea"
35.               resize="none"
36.               placeholder="请输入内容"
37.               autosize
38.             ></el-input>
39.           </div>
40.         </div>
41.       </div>
42.     </div>
43.   </div>
44. </template>
46. <script>
47. export default {
48.   name: "Batch",
49.   data() {
50.     return {
51.       // 下拉选项
52.       showedit: false,
53.       // 表格数据
54.       tableData: [],
55.       // 需要编辑的属性
56.       editProp: ["date", "name"],
58.       columns: [
59.         { label: "流程顺序", prop: "date", width: 100, align: "center" },
60.         { label: "流程名称", prop: "name", width: null },
61.       ],
62.       current_Y_X: null,
63.     };
64.   },
65.   computed: {
66.     foodLabel() {
67.       return (val) => {
68.         return this.options.find((o) => o.value === val).label;
69.       };
70.     },
71.   },
72.   mounted() {
73.     this.tableData = [
74.       {
75.         date: "你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好.",
76.         name: "王小虎",
77.         food: "选项5",
78.       },
79.       {
80.         date: "你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好.",
81.         name: "王小虎",
82.         food: "选项5",
83.       },
84.       {
85.         date: "你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好.",
86.         name: "王小虎",
87.         food: "选项5",
88.       },
89.       {
90.         date: "你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好.",
91.         name: "王小虎",
92.         food: "选项5",
93.       },
94.       {
95.         date: "你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好.",
96.         name: "王小虎",
97.         food: "选项5",
98.       },
99.       {
100.         date: "你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好.",
101.         name: "王小虎",
102.         food: "选项5",
103.       },
104.       {
105.         date: "你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好.",
106.         name: "王小虎",
107.         food: "选项5",
108.       },
109.       {
110.         date: "你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好.",
111.         name: "王小虎",
112.         food: "选项5",
113.       },
114.       {
115.         date: "-02",
116.         name: "王小虎",
117.         food: "选项5",
118.       },
119.       {
120.         date: "-02",
121.         name: "王小虎",
122.         food: "选项5",
123.       },
124.       {
125.         date: "2016-05-04",
126.         name: "王小虎",
127.         food: "选项5",
128.       },
129.       {
130.         date: "2016-05-01",
131.         name: "王小虎",
132.         food: "选项5",
133.       },
134.       {
135.         date: "2016-05-03",
136.         name: "王小虎",
137.         food: "选项5",
138.       },
139.     ];
140.   },
141.   methods: {
142.     inputBlurHandler(event, data) {
143.       const span = event.target;
144.       if (span.className.includes("column-item")) {
145.         span.children[0].children[0].focus();
146.       }
147.     },
148.   },
149. };
150. </script>
152. <style lang="scss">
153. .textarea-item {
154.   border-bottom: #f1f1f1 1px solid;
156.   .textarea-row {
157.     display: flex;
158.     justify-content: start;
159.     flex-wrap: nowrap;
160.     .column-item {
161.       &:first-child {
162.         border-right: #f1f1f1 1px solid;
163.       }
164.       .item__input {
165.         padding: 5px;
166.         textarea {
167.           background-color: rebeccapurple;
168.           width: 100%;
169.           border: none; /* 去除边框 */
170.           background-color: transparent; /* 透明背景 */
171.           padding: 0 !important;
172.           outline: none; /* 去除聚焦时的轮廓线 */
173.           margin: 0; /* 去除外边距 */
174.           font-size: 12px !important; /* 设置字体大小，与 p 标签一致 */
175.           color: inherit; /* 继承父元素的字体颜色 */
176.           line-height: 1;
177.           // white-space: pre-wrap;
178.           text-align: start;
179.           font-family: Avenir, Helvetica, Arial, sans-serif !important;
180.           overflow: hidden;
181.           // word-break: break-all !important;
183.           // font-family: youjian !important;
184.         }
185.       }
186.     }
187.   }
188. }
189. .table-input-box {
190.   overflow-y: auto;
191. }
192. </style>

复制代码