vue前端信息详情页怎么实现

vue前端信息详情页怎么实现

这篇“vue前端信息详情页怎么实现”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vue前端信息详情页怎么实现”文章吧。

1.HTML部分：

<templatexmlns:el-form-item="http://www.w3.org/1999/xhtml"><el-formref="form":model="form":rules="rules"label-width="100px"><el-page-headercontent="详情页主题"@back="goBack"/><el-row><!--基本输入框--><el-col:span="8"><el-form-itemlabel="属性1"prop="name1"><el-inputv-model="form.model1"placeholder="提示输入内容":readonly="status"/></el-form-item></el-col><!--基本单选框--><el-col:span="8"><el-form-itemlabel="属性2"prop="name2"><el-selectv-model="form.model2"class="whiteSelectBg"placeholder="提示单选":disabled="status"><el-optionlabel="选项1"value="1"/><el-optionlabel="选项2"value="2"/></el-select></el-form-item></el-col><!--基本多选框--><el-col:span="8"><el-form-itemlabel="属性3"placeholder=""prop="subjectId"><el-selectv-model="form.model3"multipleplaceholder="提示多选"@change="getOption"><el-optionv-for="optioninoptions":key="option.id":label="option.name":value="option.id"/></el-select></el-form-item></el-col></el-row><!--上传文件--><el-row><el-upload:disabled="status"action="文件上传的controller路径":on-success="uploadSuccess":before-upload="beforeUpload":show-file-list="false"><el-col:span="20"><el-form-itemlabel="文件类型名"prop="fileName"><el-inputv-model="form.fileName"placeholder="请上传实验指导，可以上传doc,docx,pdf等文档格式"readonly/></el-form-item></el-col><el-col:span="4"><el-buttontype="primary"icon="el-icon-upload":disabled="status">上传文件</el-button></el-col></el-upload></el-row><!--数据表格--><el-row><el-col:span="24"><el-form-item><el-tablev-loading="listLoading":data="form.tableList"borderfithighlight-current-rowclass="tb-edit"@row-click="tableChange"><el-table-columnalign="center":label="序号"type="index"width="80"/><!--普通数据格--><el-table-column:label="表头1"align="center"min-width="100px"><templateslot-scope="{row}"><span>{{row.id}}</span></template></el-table-column><!--可编辑数据格，根据数据状态变换输入还是只显示--><el-table-column:label="表头2"align="center"min-width="100px"><templateslot-scope="{row}"><el-inputv-if="row.seen"ref="tableInput"v-model="row.name"autofocus="autofocus"maxlength="5"@change="tableEdit(row.$index,row)"/><spanv-else>{{row.name}}</span></template></el-table-column><!--操作按钮格--><el-table-column:label="'操作'"align="center"min-width="100px"><templateslot-scope="{row}"><el-buttonsize="mini"type="danger"@click="delete(row.id)">删除</el-button></template></el-table-column></el-table></el-form-item></el-col></el-row><!--基础动态表单区块--><el-cardclass="box-card"shadow="never"><divslot="header"class="clearfix"><span>区块名</span><el-buttontype="primary"v-if="addBt":disabled="status"@click="addCard">新增</el-button></div><div><el-rowv-for="(card,index)incards":key="card.key"><el-col:span="8"><el-form-item:label="属性1"><!--根据需求自己选择放输入框还是单选多选框--></el-form-item></el-col><el-col:span="8"><el-form-item:label="属性2"><!--根据需求自己选择放输入框还是单选多选框--></el-form-item></el-col><el-col:span="8"><el-button:disabled="status"@click.prevent="deleteCard(card)">删除</el-button><el-button:disabled="status"@click="addCard">新增</el-button></el-col></el-row></div></el-card><el-row><el-form-item><el-buttontype="primary"@click="submit">提交</el-button><el-button@click="reset('form')">重置</el-button><el-button@click="goBack">返回</el-button></el-form-item></el-row></el-form></template>

2.JS部分：

<script>importwavesfrom'@/directive/waves'//wavesdirective,点击产生水波纹效果,在标签中添加v-wavesimportPaginationfrom'@/components/Pagination'//分页组件exportdefault{data(){return{id:'',options:[],guideFileIsChange:'',guideFile:{file:'',name:''},listLoading:false,addBt:true,form:{model1:'',model2:'',model3:[],fileName:'',tableList:[{id:'',name:'',seen:false,},{id:'',name:'',seen:false,}]cards:[],},},rules:{'model1':[{required:true,message:'请输入内容'}],'model2':[{required:true,message:'请选择选项'}],'model3':[{required:true,message:'请选择选项'}],'fileName':[{required:true,message:'请上传文件'}],},},//页面初始化created(){//获取上一个页面传递过来的参数，id，状态等。。。this.id=this.$route.query.idthis.action=this.$route.query.action},methods:{//跳转返回指定的页面goBack(){this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item=>item.path===this.$route.path),1)this.$router.push({path:'跳转的页面路径'})},getOption(){//获取动态选项框的数据constlist=[]this.options=list},//上传文件uploadSuccess(res,file){this.guideFileIsChange='1'this.guideFile.file=file.rawthis.guideFile.name=file.raw.namethis.form.fileName=file.raw.name},//实验指导书的信息beforeUpload(file){setTimeout(()=>{this.$message({duration:1600,type:'success',message:'上传文件成功！'})})returntrue},tableChange(){console.log('点击表格行触发的操作')},//触发出现输入框tableEdit(row.$index,row){for(constindexinthis.tableList){if(row.id!==this.tableList[index].id){this.tableList[index].seen=false}else{this.tableList[index].seen===false?this.tableList[index].seen=true:this.tableList[index].seen=false}}if(row.seen===true){this.$nextTick(()=>{this.$refs.tableInput.focus()},100)}},delete(id){this.$confirm('确认删除这一条信息？','确认删除？',{distinguishCancelAndClose:true,confirmButtonText:'确定',cancelButtonText:'取消'}).then(()=>{for(leti=0;i<this.tableList.length;i++){if(id===this.tableList[i].id){this.tableList.splice(i,1)}}this.$message.success('删除成功！')}).catch(action=>{})},addCard(){this.cards.push({key1:value1,key2:value2})this.addBt=false},deleteCard(card){constindex=this.cards.indexOf(card)if(index!==-1){this.cards.splice(index,1)}if(this.cards.length===0){this.addBt=true}},submit(){console.log('提交！')},reset(formName){this.$refs[formName].resetFields()},},}

3.css部分：

//这是修改过得输入框只读的样式<style>.whiteSelectBg.el-input.is-disabled.el-input__inner{background-color:white;color:#606266;}</style>

以上就是关于“vue前端信息详情页怎么实现”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注恰卡编程网行业资讯频道。