23-6-28
完成: 今天完善了后台问题管理还有实名审核部分的内容,完善了前台的常见问题的展示,对后台问题管理,中问题内容过长前端显示非常的难看 问题: 对Element中表单还是用的不熟悉,再实名审核,审核我的理解应该是不能更改用户信息的,这部分还没有找到实现的方法(已经解决–通过chatgpt) 总结:
1、文本过长,超出部分省略显示
代码语言:javascript复制<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表单的信息
代码语言:javascript复制<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"
属性,以使输入框不可编辑。这样,用户姓名、真实姓名和身份证号码的输入框将变为只读状态。
@