浙江龙网

  1. 首页 > 生活百科 > >

Vue3实现动态导入Excel表格数据( 二 )

生活百科

这里导入数据后 ， 会调用主组件方法(dataUploadchildClick)用于回写主组件表格数据,列头等数据const dataUploadchildClick = (data, colunm) => {state.colunm = colunm;state.tempData = https://www.huyubaike.com/biancheng/data;getData();dataUpload.value.cancel();};2.3.2设置数据对应关系定义后台需要的列SelectData: [{key: 'zkzh', type: '', value: '', selectValue: '', title: '准考证号'},{key: 'zjlb', type: '', value: '', selectValue: '', title: '证件类别'},{key: 'zjhm', type: '', value: '', selectValue: '', title: '证件号码'},{key: 'ksxm', type: '', value: '', selectValue: '', title: '考生姓名'},{key: 'xb', type: '', value: '', selectValue: '', title: '性别'},{key: 'ss', type: '', value: '', selectValue: '', title: '省市'},{key: 'kq', type: '', value: '', selectValue: '', title: '考区'},{key: 'kdh', type: '', value: '', selectValue: '', title: '考点号'},{key: 'kdmc', type: '', value: '', selectValue: '', title: '考点名称'},{key: 'kch', type: '', value: '', selectValue: '', title: '考场号'},{key: 'kchdz', type: '', value: '', selectValue: '', title: '考场地址'},{key: 'zwh', type: '', value: '', selectValue: '', title: '座位号'},{key: 'chc', type: '', value: '', selectValue: '', title: '场次'}]创建Select组件 ， 组件核心代码页面布局部分<label style="width: 50px;display: inline-block;">{{ itemKey }}:</label><el-select v-model="state.type" :placeholder="name" size="large" clearable><el-optionv-for="item in state.options":key="item.value":label="item.label":value="https://www.huyubaike.com/biancheng/item.value"/></el-select><el-input v-model="state.value" style="width: 200px;" :placeholder="name" size="large" v-if="state.type=='0'"/><el-select v-model="state.selectValue" style="width: 200px;" :placeholder="name" size="large" clearablev-if="state.type=='1'||state.type=='2'"><el-optionv-for="item in state.ValueOptions":key="item.key":label="item.lable":value="https://www.huyubaike.com/biancheng/item.key"/></el-select>接受参数定义props: {itemKey: String,name: String,type: String,value: String,selectValue: String,colunm: Object},页面变量定义,这里定义的默认option主要有三个

  • 0 固定值，这一列为固定值，不从表格中读取
  • 1 下拉框，从导入数据中选择
  • 2 自动生成，这里主要是特殊业务，可以进行自定义扩展
const state = reactive({value: ref(''),type: ref(''),selectValue: ref([]),ValueOptions:[{}],options: [{value: '0',label: '固定值',},{value: '1',label: '下拉框',},{value: '2',label: '自动生成',},],});监听下拉框选择类型：watch(() => state.type, (newVal) => {context.emit('update:type', newVal);});监听下拉框选择固定，文本框输入的值：watch(() => state.value, (newVal) => {context.emit('update:value', newVal)})监听下拉框选择下拉框，后面下拉框选择的值：watch(() => state.selectValue, (newVal) => {context.emit('update:selectValue', newVal)})监听表格的列，动态加载下拉框绑定的值：watch(() => props.colunm, (newVal: any) => {state.ValueOptions=newVal;})最终的效果:
Vue3实现动态导入Excel表格数据

文章插图
父页面进行引用<el-row :gutter="24" justify="start" style="text-align: left;"><div v-for="(item,index) in state.SelectData" :key='index' style="margin-top: 5px;width: 100%;"><el-col :span="24"><Select:itemKey="item.key"v-model:type="item.type"v-model:value="https://www.huyubaike.com/biancheng/item.value"v-model:selectValue="https://www.huyubaike.com/biancheng/item.selectValue":name="item.title":colunm="state.colunm"/></el-col></div></el-row>2.3.3进行数据提交提交数据到后台进行处理，这里根据自己的业务进行验证，或则进行其它扩展const Save = () => {if (state.tempData.length == 0) {state.active=1;ElMessage.warning('请导入考生数据');return;}let CheckSelectData = https://www.huyubaike.com/biancheng/true;state.SelectData.forEach((value, index) => {if (!value.type) {CheckSelectData = false}});if (!CheckSelectData) {state.active=2;ElMessage.warning('请设置完成数据对应关系');return;}if (state.tableTimeData.data.length==0){state.active=3;ElMessage.warning('请添加场次数据');return;}if (!state.ExamData.jiancheng||!state.ExamData.kaikaonianyue||!state.ExamData.quancheng){state.active=4;ElMessage.warning('请设置任务相关信息');return;}axios.post('/GenerateCheckTemplate', state).then(function (response) {if (response.status == 200) {ElMessage.success(response.data);dataUpload.value.cancel();getData();} else {ElMessage.error(response.data)}})}后台定义接口:/GenerateCheckTemplate定义实体对前台导入数据进行接收：public class GenerateCheckTemplate{/// <summary>/// 考试任务对象/// </summary>public ExamData ExamData { get; set; }/// <summary>/// 数据对应关系对象/// </summary>public List<Correspondence> SelectData { get; set; }/// <summary>/// 导入数据/// </summary>public List<Dictionary<string, string>> tempData { get; set; }/// <summary>/// 导入数据列集合/// </summary>public List<Colunm> colunm { get; set; }/// <summary>/// 场次对象/// </summary>public tableTimeData tableTimeData { get; set; }}/// <summary>/// 考试任务对象/// </summary>public class ExamData{/// <summary>/// 简称/// </summary>public string jiancheng { get; set; }/// <summary>/// 考试年月/// </summary>public string kaikaonianyue { get; set; }/// <summary>/// 简称/// </summary>public string quancheng { get; set; }}/// <summary>/// 数据对应关系对象/// </summary>public class Correspondence{/// <summary>/// key/// </summary>public string key { get; set; }/// <summary>/// 下拉选择数据/// </summary>public string selectValue { get; set; }/// <summary>/// 标题/// </summary>public string title { get; set; }/// <summary>/// 类型 0 固定值 1下拉框选择/// </summary>public string type { get; set; }/// <summary>/// 固定值数据/// </summary>public string value { get; set; }}/// <summary>/// 表格对象/// </summary>public class tableTimeData{/// <summary>/// 提交表格数据/// </summary>public List<ExamTime> data { get; set; }/// <summary>/// 总数/// </summary>public int total { get; set; }}public class ExamTime{/// <summary>/// 场次编码/// </summary>public int? ExamTimeCode { get; set; }/// <summary>/// 场次名称/// </summary>public string ExamTimeName { get; set; }/// <summary>/// 开始时间/// </summary>public string startTime { get; set; }/// <summary>/// 结束时间/// </summary>public string endTime { get; set; }/// <summary>/// 是否编辑状态/// </summary>public bool Edit { get; set; }}/// <summary>/// 导入数据列对象/// </summary>public class Colunm{/// <summary>/// 键值/// </summary>public string key { get; set; }/// <summary>/// 值/// </summary>public string lable { get; set; }}

推荐阅读


上一篇：【实操日记】使用 PyQt5 设计下载远程服务器日志文件程序

下一篇：从0搭建vue3组件库: Input组件