经验总结

  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进行数据提交提交数据到后台进行处理，这里根据自己的业务进行验证，或则进行其它扩展

经验总结扩展阅读


上一篇：2022最火的新人结婚祝福

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