方法一:用Ref绑定获取
<el-select
filterable
v-model="addForm.siteid"
placeholder="测点"
style="width: 33%"
:disabled="!zone"
ref="siteRef"
>
<el-option
v-for="item in siteList"
:label="item.sitemark"
:value="item.siteid"
/>
</el-select>
const addForm=ref({
siteid:"",
sitemark:"",
})
const submit=()=>{
addForm.value.sitemark = siteRef.value?.selected.currentLabel;
}
方法二:点击时获取标签名
<el-select
filterable
v-model="addForm.siteid"
placeholder="测点"
style="width: 33%"
:disabled="!zone"
ref="siteRef"
>
<el-option
v-for="item in siteList"
:label="item.sitemark"
:value="item.siteid"
@click.native="changeGateway(item.sitemark)"
/>
</el-select>
const changeGateway = (sitename: string) => {//这里的sitename就是标签名
addForm.value.sitemark = sitename;
};
上传文件
<el-upload
ref="uploadRef" #绑定ref
name="sourcefile" #默认上传文件字段是file,我的项目是sourcefile,所以这里改了一下
:on-exceed="handleExceed"#文件超出时的回调,会将上一个文件移除
:action="`${baseUrl}/datacapture/file/upload/${userStore.projectid}`"
:data="uploadList"#上传文件的一些附加信息,data,会自动创建表单上传
:on-success="handleAvatarSuccess" #上传成功的回调,没关自动上传,所以这条是自动执行
:limit="1" #限制一次只能传一个文件
accept=".xlsx,.xls"
>
<el-button icon="UploadFilled" type="primary">上传文件</el-button>
<template #tip>
<div class="el-upload__tip">
xlsx/xls文件,限制数量1,多选文件自动替换,上传文件后请点击提交
</div>
</template>
</el-upload>
import { genFileId, type UploadProps, type UploadRawFile } from "element-plus";
const uploadRef=ref();
//上传文件附加信息data传参
const uploadList = ref<any>({
uploaderid: userStore.userInfo.uid,
uploader: userStore.userInfo.actualname,
uploadTime: dayjs().format(`YYYY-MM-DD HH:mm:ss`),
filecategory: 1,
});
//多选文件自动替换
const handleExceed: UploadProps["onExceed"] = (files) => {
uploadRef.value!.clearFiles();//清除上传文件
const file = files[0] as UploadRawFile;
file.uid = genFileId();
uploadRef.value!.handleStart(file);
};
const handleAvatarSuccess: UploadProps["onSuccess"] = (
response //ajax请求的返回值信息
) => {
//收集地址
addsForm.value.filename = response.data;
};