1.给接口请求的数组对象 增加自己需要的字段
const r1 = await getPaperOptionList({
id: route.query.evaluateId,
questionNum:
ruleData.value[index].ruleDetail.firstScope[0].firstVal,
})
ruleData.value[index].ruleDetail.secondScope[0].paperOption =
r1.result.map((item) => ({
...item,
selectOption:
item.type === 1 //选择题 是选项code
? item.code
: item.optionsType === '1' //填空题如果是学院或专业的id，普通填空题传选项id(optionsType0.不是填空 1.学院表 2.专业表)
? item.id
: item.id,
showLabel: item.type === 1 ? item.code : item.content,
}))
删除自定义在数组里使用的字段的属性和属性值
ruleForm.value.materialList.map((item) => {
delete item.id
})
``
写法二：
```js
let obj = JSON.parse(JSON.stringify(this.formS))
for (let key in obj) {
if (
Object.prototype.hasOwnProperty.call(obj, key) &&
key === 'checkPass'
)
delete obj[key]
}
2.element-plus 表格树
<el-table
v-loading="listLoading"
:data="tableData"
row-key="evaluateId"
style="width: 100%"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
<el-table-column label="测评类型" prop="evaluateId" show-overflow-tooltip>
<template #default="{ row }">
<!-- <span>{
{
evaluationFormat(row.evaluateType) }}</span> -->
<span>{
{
row.name }}</span>
</template>
</el-table-column>
<el-table-column
label="参与测试人数"
prop="evaluateNum"
show-overflow-tooltip
/>
<el-table-column
label="完成测试人数"
prop="finishNum"
show-overflow-tooltip
/>
</el-table>
row-key="evaluateId"是接口中唯一标准的字段
[
{
"children": [
{
"evaluateId": "1432901567562641449",
"evaluateNum": 90,
"evaluateType": 105,
"finishNum": 57,
"name": "学科知识能力"
},
{
"evaluateId": "1432901567562641450",
"evaluateNum": 37,
"evaluateType": 107,
"finishNum": 31,
"name": "核心通用能力高级测试"
}
],
"evaluateId": "1432901567562641448",
"evaluateNum": 92,
"evaluateType": 102,
"finishNum": 26,
"name": "高阶能力测评"
},
{
"children": [
{
"evaluateId": "1432901567562641452",
"evaluateNum": 53,
"evaluateType": 111,
"finishNum": 50,
"name": "适配职业测评"
}
],
"evaluateId": "1432901567562641451",
"evaluateNum": 53,
"evaluateType": 104,
"finishNum": 50,
"name": "适配职业测评"
}
]
3.格式化数字格式 为：88,000
const numFormat = (val) => {
//每个三位价格逗号
var int = val.toString().split('').reverse().join('') // 翻转整数
var temp = '' // 临时变量
for (var i = 0; i < int.length; i++) {
temp += int[i]
if ((i + 1) % 3 === 0 && i !== int.length - 1) {
temp += ',' // 每隔三个数字拼接一个逗号
}
}
temp = temp.split('').reverse().join('') // 加完逗号之后翻转
return temp // 返回
}
4.element-plus 上传图片 问题：上传一张图片 出现多个上传的位置 闪动 解决：上传图片 src为本地字节流地址，不然他会读多个上传到服务器的地址进行展示出现闪动效果
<el-form-item label="测评图片" prop="img">
<el-upload
ref="upload"
action="#"
class="upload-test"
:class="{ hide: hideUpload }"
:file-list="imageList"
:http-request="uploadFile"
:limit="1"
list-type="picture-card"
:on-change="handleChange"
>
<template #default>
<i class="el-icon-plus"></i>
</template>
<template #file="{ file }">
<div>
<img
alt=""
class="el-upload-list__item-thumbnail"
:src="file.url"
style="width: 146px; height: 146px; border-radius: 6px"
/>
<span class="el-upload-list__item-actions">
<span
class="el-upload-list__item-delete"
@click="handleRemove(file)"
>
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</template>
</el-upload>
</el-form-item>
<script>
import {
ref, onActivated, onUnmounted, computed, nextTick } from 'vue'
import {
uploadPublicToAliOSS } from '@/api/common.js'
import {
ossFilePath } from '@/utils/ossFilePath'
export default {
name: 'ConfigureInformationModal',
components: {
WmTinymce },
emits: ['onEmitSubmit'],
setup() {
const ruleForm = ref({
img: '', //图片
})
const isCircle = ref(false)
const coverMapUrl = ref('')
const formRef = ref(null)
const imageList = ref([])
const upload = ref(null)
const hideUpload = ref(false) //上传一张之后隐藏长传图片按钮
onActivated(() => {
loading.value = true
formRef.value.resetFields() //初始化Form表单
ruleForm.value = {
type: '', //测评类型 大1 小2
evaluateType: '', // 测评类型
pid: '', //上级id(小测评必填)
questionPaperId: '', //试卷id(小测评必填)
initSize: '', //测评人数
img: '', //图片
intro: '', //简介
detailIntro: '', //详细介绍
notes: '', //测评须知
superiority: '', //superiority
}
imageList.value = []
coverMapUrl.value = ''
hideUpload.value = false
})
// 图片上传成功回调
const uploadFile = (data) => {
let fd = new FormData()
fd.append('file', data.file)
fd.append('ossFilePath', ossFilePath('我的能量'))
uploadPublicToAliOSS(fd).then((response) => {
if (parseInt(response.status) === 200) {
// console.log('imageList.value:', imageList.value)
ruleForm.value.img = response.result.url
isCircle.value = false
coverMapUrl.value = response.result.url
hideUpload.value = true
} else {
gp.$baseMessage(`上传失败！`, 'error')
}
})
}
// 上传文件列表删除
const handleRemove = (file) => {
ruleForm.value.img = ''
coverMapUrl.value = ''
imageList.value.splice(0, 1)
hideUpload.value = imageList.value.length >= 1
upload.value.handleRemove(file)
}
const handleChange = () => {
//一张时 class为true
hideUpload.value = imageList.value.length >= 1
}
// 编辑回显
const fetchData = async () => {
loading.value = true
try {
const res = await getTestDetail(route.query.id)
if (res.status === 200) {
ruleForm.value = res.result
if (ruleForm.value.img) {
imageList.value.push({
url: ruleForm.value.img,
})
coverMapUrl.value = ruleForm.value.img
hideUpload.value = true //回显有一张图片 隐藏class 为true
} else {
imageList.value = []
}
loading.value = false
return Promise.resolve(true)
}
} catch (err) {
return Promise.reject(err)
}
}
return {
ruleForm,
uploadFile,
isCircle,
coverMapUrl,
formRef,
fetchData, //回显
handleRemove,
handleChange,
imageList,
upload,
hideUpload,
}
},
}
</script>
<style lang="scss" scoped>
:deep() {
.hide .el-upload--picture-card {
display: none !important;
}
}
</style>
展示效果：
6.移除数组指定的一组数据
ruleDetails.value.splice(index, 1)
7.预览图片element组件修改
<el-table-column align="left" label="" min-width="140">
<template #default="scope">
<el-row v-if="scope.row.tableDataImage" :gutter="20">
<el-col
v-for="(item, index) in scope.row.tableDataImage"
:key="index"
:span="8"
>
<div class="" style="margin-bottom: 6px">
<el-image
:ref="
(el) => {
if (el) test[scope.row.id] = el
}
"
append-to-body
class="show_image"
fit="fill"
lazy
:preview-src-list="scope.row.images"
:src="item"
:z-index="9999999"
/>
</div>
</el-col>
<!-- @click="getImageNumber(scope.row)" -->
<el-button
v-show="scope.row.tableDataImage.length < scope.row.images.length"
class="el-button-text--primary"
type="text"
@click="isImagePreView(scope.row.id)"
>
查看更多
</el-button>
</el-row>
</template>
</el-table-column>
<script>
setup() {
const test = reactive({
})
const showViewer = ref(false)
const getDetail = async (cursor) => {
if (cursor) {
info.value = {
...info.value, cursor: cursor } // 根据传递的cursor来重置pageInfo
}
await getPostsMsg(route.query.id, {
cursor: cursor,
limit: info.value.limit,
searchCount: true,
sidx: '',
sord: '',
content: info.value.content,
// content: '',
}).then((res) => {
totalNum.value = res.result.total
tableData.value = res.result.records.map((item) => {
test[item.id] = null
return {
...item,
tableDataImage: item.images.slice(0, 3), //展示前三章图片
copyTableDataImage: item.images.slice(0, 3), // 拷贝数据 静态 三张
clickBtnNum: 0, //点击查看更多次数
}
})
imageList.value = tableData.value.images
const images = [...document.getElementsByTagName('img')].map((img) =>
img.getAttribute('src')
)
if (images && images.length) {
setTimeout(() => {
loading.value = false
}, 400)
}
})
}
const isImagePreView = (id) => {
test[id].showViewer = true
}
return {
tableData, //表格数据
imageList,
staticUserImage,
getDetail, //刷新帖子列表
getImageNumber, //查看更多
showViewer,
test,
isImagePreView,
}
},
</script>