其实这个不是我最后的结果，只是中间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去实现的方法
<template>
<div class="page">
<div class="table table-input-box">
<div
style="flex: 1"
v-for="(item, index) in tableData"
:key="index"
class="textarea-item"
>
<div class="textarea-row">
<div
style="flex: 1"
@click.prevent="inputBlurHandler($event, item)"
class="column-item item1"
>
<el-input
class="item__input"
v-model="tableData[index].date"
type="textarea"
resize="none"
placeholder="请输入内容"
autosize
></el-input>
</div>
<div
style="flex: 1"
@click.prevent="inputBlurHandler($event, item)"
class="column-item item2"
>
<el-input
class="item__input"
v-model="tableData[index].name"
type="textarea"
resize="none"
placeholder="请输入内容"
autosize
></el-input>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Batch",
data() {
return {
// 下拉选项
showedit: false,
// 表格数据
tableData: [],
// 需要编辑的属性
editProp: ["date", "name"],
columns: [
{ label: "流程顺序", prop: "date", width: 100, align: "center" },
{ label: "流程名称", prop: "name", width: null },
],
current_Y_X: null,
};
},
computed: {
foodLabel() {
return (val) => {
return this.options.find((o) => o.value === val).label;
};
},
},
mounted() {
this.tableData = [
{
date: "你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好.",
name: "王小虎",
food: "选项5",
},
{
date: "你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好.",
name: "王小虎",
food: "选项5",
},
{
date: "你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好.",
name: "王小虎",
food: "选项5",
},
{
date: "你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好.",
name: "王小虎",
food: "选项5",
},
{
date: "你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好.",
name: "王小虎",
food: "选项5",
},
{
date: "你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好.",
name: "王小虎",
food: "选项5",
},
{
date: "你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好.",
name: "王小虎",
food: "选项5",
},
{
date: "你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好.",
name: "王小虎",
food: "选项5",
},
{
date: "-02",
name: "王小虎",
food: "选项5",
},
{
date: "-02",
name: "王小虎",
food: "选项5",
},
{
date: "2016-05-04",
name: "王小虎",
food: "选项5",
},
{
date: "2016-05-01",
name: "王小虎",
food: "选项5",
},
{
date: "2016-05-03",
name: "王小虎",
food: "选项5",
},
];
},
methods: {
inputBlurHandler(event, data) {
const span = event.target;
if (span.className.includes("column-item")) {
span.children[0].children[0].focus();
}
},
},
};
</script>
<style lang="scss">
.textarea-item {
border-bottom: #f1f1f1 1px solid;
.textarea-row {
display: flex;
justify-content: start;
flex-wrap: nowrap;
.column-item {
&:first-child {
border-right: #f1f1f1 1px solid;
}
.item__input {
padding: 5px;
textarea {
background-color: rebeccapurple;
width: 100%;
border: none; /* 去除边框 */
background-color: transparent; /* 透明背景 */
padding: 0 !important;
outline: none; /* 去除聚焦时的轮廓线 */
margin: 0; /* 去除外边距 */
font-size: 12px !important; /* 设置字体大小，与 p 标签一致 */
color: inherit; /* 继承父元素的字体颜色 */
line-height: 1;
// white-space: pre-wrap;
text-align: start;
font-family: Avenir, Helvetica, Arial, sans-serif !important;
overflow: hidden;
// word-break: break-all !important;
// font-family: youjian !important;
}
}
}
}
}
.table-input-box {
overflow-y: auto;
}
</style>