(最后附有完整代码)
两个点:
第一个:
需求要实现一个表格,点击出现大文本框,可修改内容,用的是 $prompt 加 inputType: "textarea", 实现,但是有个问题,弹框和输入框的宽高,直接写不生效
this.$prompt(`${label}`, '编辑*', {
inputValue: this.editingCell.value,
confirmButtonText: '确定',
cancelButtonText: '取消',
inputType: "textarea",
customClass: 'textareaBox'
}
于是弹出框用的是,添加 customClass: 'textareaBox' 类名的方式,注意!!!style有写scoped会不生效,可以单独写个style标签中
<style>
.textareaBox {
min-width:55%;
height: 80%;
}
</style>
第二点:
textarea弹框高度问题,在这里我使用定时器实现,类名加textarea的方式
// textarea输入框的高度
setTimeout(() => {
const textarea = document.querySelector('.textareaBox textarea');
if (textarea) {
textarea.style.height = '300px'; // Set the height of the textarea
}
}, 100);
(附完整代码)
<template>
<!-- 整体min位置 -->
<div class="divmin">
<!-- ---------------人员指标参数配置-------------------- -->
<h3 class="table-cee2">人员指标参数配置</h3>
<el-table :data="tableData" row-key="id" border height="258">
<!-- 子集代号 min-width="250"-->
<el-table-column prop="SubsetCode" label="子集代号" show-overflow-tooltip>
<template slot-scope="scope">
<div @click="editCell(scope.row, 'SubsetCode', '子集代号')"><span>{{ scope.row.SubsetCode }}</span></div>
</template>
</el-table-column>
<!-- 同步指标名称 -->
<el-table-column prop="SyncName" label="同步指标名称" show-overflow-tooltip>
<template slot-scope="scope">
<div @click="editCell(scope.row, 'SyncName', '同步指标名称')"><span>{{ scope.row.SyncName }}</span></div>
</template>
</el-table-column>
<!-- 唯一指标 -->
<el-table-column prop="TBindexName" label="唯一指标" show-overflow-tooltip>
<template slot-scope="scope">
<div @click="editCell(scope.row, 'TBindexName', '唯一指标')"><span>{{ scope.row.TBindexName }}</span></div>
</template>
</el-table-column>
<!-- 查询指标 -->
<el-table-column prop="queryIndicators" label="查询指标" show-overflow-tooltip>
<template slot-scope="scope">
<div @click="editCell(scope.row, 'queryIndicators', '查询指标')"><span>{{ scope.row.queryIndicators }}</span></div>
</template>
</el-table-column>
<!-- SQL视图 -->
<el-table-column prop="SQLview" label="SQL视图" show-overflow-tooltip>
<template slot-scope="scope">
<div @click="editCell(scope.row, 'SQLview', 'SQL视图')"><span>{{ scope.row.SQLview }}</span></div>
</template>
</el-table-column>
<!-- 地址接口 -->
<el-table-column prop="AdresLnface" label="地址接口" show-overflow-tooltip>
<template slot-scope="scope">
<div @click="editCell(scope.row, 'AdresLnface', '地址接口')"><span>{{ scope.row.AdresLnface }}</span></div>
</template>
</el-table-column>
<!-- 其它参数配置1 -->
<el-table-column prop="ParameterOne" label="其它参数配置1" show-overflow-tooltip>
<template slot-scope="scope">
<div @click="editCell(scope.row, 'ParameterOne', '其它参数配置1')"><span>{{ scope.row.ParameterOne }}</span></div>
</template>
</el-table-column>
<!-- 其它参数配置2 -->
<el-table-column prop="ParameterTwo" label="其它参数配置2" show-overflow-tooltip>
<template slot-scope="scope">
<div @click="editCell(scope.row, 'ParameterTwo', '其它参数配置2')"><span>{{ scope.row.ParameterTwo }}</span></div>
</template>
</el-table-column>
<!-- 字段映射 -->
<el-table-column prop="fieldMapping" label="字段映射">
<template>
<el-button style="width: 78px;" size="mini" type="success" plain @click="viewFile(scope.row.fieldMapping)">查看</el-button><br>
<el-button style="margin-top:2px;" size="mini" type="success" plain @click="handleUpload">重新上传</el-button>
</template>
</el-table-column>
<!-- 操作 -->
<el-table-column label="操作" prop="caozuo" align="center" min-width="58">
<template slot-scope="scope">
<el-button plain type="danger" size="mini" @click="onDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
// ...
editingCell: { row: null, column: null, value: null },
// --- 人员指标参数配置 ---
tableData: [
{ id: '1', SubsetCode:'A011111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111', SyncName:'A01,A02,A03111', TBindexName:'dad', queryIndicators:'faf', SQLview:'a', fieldMapping:'faf', AdresLnface:'gs11111111111', ParameterOne:'gs11111111111', ParameterTwo:'gs11111111111',},
{ id: '2', SubsetCode:'A01', SyncName:'A01,A02,A03', TBindexName:'dad', queryIndicators:'faf', SQLview:'a', fieldMapping:'faf', AdresLnface:'gs', ParameterOne:'gs', ParameterTwo:'gs',},
{ id: '3', SubsetCode:'A01', SyncName:'A01,A02,A03', TBindexName:'dad', queryIndicators:'faf', SQLview:'a', fieldMapping:'faf', AdresLnface:'gs', ParameterOne:'gs', ParameterTwo:'gs',},
{ id: '4', SubsetCode:'A01', SyncName:'A01,A02,A03', TBindexName:'dad', queryIndicators:'faf', SQLview:'a', fieldMapping:'faf', AdresLnface:'gs', ParameterOne:'gs', ParameterTwo:'gs',},
{ id: '5', SubsetCode:'A01', SyncName:'A01,A02,A03', TBindexName:'dad', queryIndicators:'faf', SQLview:'a', fieldMapping:'faf', AdresLnface:'gs', ParameterOne:'gs', ParameterTwo:'gs',},
],
}
},
methods: {
// --- 人员指标参数配置的方法 ---
editCell(row, column, label) {
this.editingCell.row = row;
this.editingCell.column = column;
this.editingCell.value = row[column];
this.editingCell.label = label;
// 打开弹窗
this.$prompt(`${label}`, '编辑*', {
inputValue: this.editingCell.value,
confirmButtonText: '确定',
cancelButtonText: '取消',
inputType: "textarea",
customClass: 'textareaBox'
}).then(({ value }) => {
this.editingCell.row[column] = value; // 将输入的值赋给对应的单元格
this.editingCell = { row: null, column: null, value: null, label: null }; // 重置editingCell
}).catch(() => {
this.editingCell = { row: null, column: null, value: null, label: null }; // 重置editingCell
});
// textarea输入框的高度
setTimeout(() => {
const textarea = document.querySelector('.textareaBox textarea');
if (textarea) {
textarea.style.height = '300px'; // Set the height of the textarea
}
}, 100);
},
// 查看
viewFile(filePath) {
this.$msgbox({
title: '查看文件',
message: `<div style="text-align: center;"><a href="${filePath}" target="_blank">点击查看文件</a></div>`,
showCancelButton: false,
confirmButtonText: '确定',
});
},
// 重新上传
handleUpload() {
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.style.display = 'none';
fileInput.addEventListener('change', (event) => {
const file = event.target.files[0];
// 在这里可以上传文件,可以使用axios或其他方法发送文件到服务器
console.log('上传的文件:', file);
});
document.body.appendChild(fileInput);
fileInput.click();
},
// --- 删除按钮 ---
onDelete(row) {
const index = this.tableData.indexOf(row);
if (index !== -1) { this.tableData.splice(index, 1); }
},
},
}
</script>
<style>
/* 人员指标参数配置,每个弹出框宽高 */
.textareaBox {
min-width:55%;
height: 80%;
}
</style>
<style scoped lang="less">
.divmin {
max-width: 1130px;
margin: auto;
border: 1px solid #e0dede; /* 添加外部边框 */
padding: 2px 12px;
}
/* --------------------- 人员指标参数配置 --------------------------- */
/* 下边框线 */
.table-cell {
color: #837e7e;
padding-bottom:5px;
padding-top:8px;
border-bottom: 1px solid #e5e2e2;
}
.table-cee2{
color: #837e7e;
padding-top:15px;
margin-bottom:5px;
border-top: 1px solid #e5e2e2;
}
/* 每行高度 */
::v-deep {
.el-table .el-table__cell {
padding: 1px 0;
text-align: center;
font-size: 11px;
text-overflow: ellipsis;
}
.el-table .cell {
line-height: 16px;
}
.el-table th.el-table__cell>.cell {
padding: 6px 0;
background: linear-gradient(135deg, #c3fdff, #b9b6e5); /* 设置淡蓝色金属感渐变背景色 */
border-radius: 1px; /* 设置圆角 */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
border: none;
}
}
</style>