java项目之众筹项目

用户8447427

发布于 2023-10-18 15:14:38

1730

发布于 2023-10-18 15:14:38

23-6-28

完成：今天完善了后台问题管理还有实名审核部分的内容，完善了前台的常见问题的展示,对后台问题管理，中问题内容过长前端显示非常的难看问题：对Element中表单还是用的不熟悉，再实名审核，审核我的理解应该是不能更改用户信息的，这部分还没有找到实现的方法（已经解决–通过chatgpt）总结：

1、文本过长，超出部分省略显示

<style>
  .cell-content {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>

//原来：
<el-table-column prop="content" label="问题描述" align="center"></el-table-column>
//改之后的：
<el-table-column prop="content" label="问题描述" align="center" >
		<template slot-scope="{ row }">
			<div class="cell-content">{{ row.content }}</div>
		</template>
</el-table-column>

我们使用了 Element UI 表格的插槽 (slot) 来自定义单元格的内容。通过 <template> 标签的 slot-scope 属性，我们可以访问到当前行数据对象 row。然后，在自定义的内容中，我们将问题描述内容包装在一个 <div> 元素中，并为其添加了 .cell-content 类名。

在样式部分，我们添加了 .cell-content 类名的样式，其中 white-space: nowrap; 设置文本不换行，overflow: hidden; 隐藏溢出部分，text-overflow: ellipsis; 使用省略号表示溢出部分。

2、设置不能更改emelent表单的信息

<el-row>
    <el-col :span="24">
        <el-form-item label="身份证号码" prop="idcard">
            <el-input v-model="formData.idcard" type="textarea" :disabled="true"></el-input>
        </el-form-item>
    </el-col>
</el-row>

我们在需要禁用的 <el-input> 组件上添加了 :disabled="true" 属性，以使输入框不可编辑。这样，用户姓名、真实姓名和身份证号码的输入框将变为只读状态。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2023-06-28，如有侵权请联系 cloudcommunity@tencent.com 删除

java