vue前端信息詳情頁模板梳理詳解
本文實(shí)例為大家分享了vue前端信息詳情頁模板的梳理,供大家參考,具體內(nèi)容如下
前言:
自己總結(jié)方便自己用的,覺得有用可以參考使用,歡迎留言提出改進(jìn)意見。
1.HTML部分:
<template xmlns:el-form-item="http://www.w3.org/1999/xhtml"> ? <el-form ref="form" :model="form" :rules="rules" label-width="100px"> ? ? <el-page-header content="詳情頁主題" @back="goBack" /> ? ? <el-row style="margin-top: 30px"> ? ? ? <!--基本輸入框--> ? ? ? <el-col :span="8"> ? ? ? ? <el-form-item label="屬性1" prop="name1"> ? ? ? ? ? <el-input v-model="form.model1" placeholder="提示輸入內(nèi)容" :readonly="status"/> ? ? ? ? </el-form-item> ? ? ? </el-col> ? ? ? <!--基本單選框--> ? ? ? <el-col :span="8"> ? ? ? ? <el-form-item label="屬性2" prop="name2"> ? ? ? ? ? <el-select v-model="form.model2" class="whiteSelectBg" placeholder="提示單選" style="width: 100%;" :disabled="status"> ? ? ? ? ? ? <el-option label="選項(xiàng)1" value="1" /> ? ? ? ? ? ? <el-option label="選項(xiàng)2" value="2" /> ? ? ? ? ? </el-select> ? ? ? ? </el-form-item> ? ? ? </el-col> ? ? ? <!--基本多選框--> ? ? ? <el-col :span="8"> ? ? ? ? <el-form-item label="屬性3" placeholder="" prop="subjectId"> ? ? ? ? ? <el-select v-model="form.model3" multiple placeholder="提示多選" style="width: 100%;" @change="getOption"> ? ? ? ? ? ? <el-option v-for="option in options" :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-item label="文件類型名" prop="fileName"> ? ? ? ? ? ? <el-input v-model="form.fileName" placeholder="請上傳實(shí)驗(yàn)指導(dǎo),可以上傳doc,docx,pdf等文檔格式" readonly style="width: 750px;" /> ? ? ? ? ? </el-form-item> ? ? ? ? </el-col> ? ? ? ? <el-col :span="4"> ? ? ? ? ? <el-button type="primary" icon="el-icon-upload" style="margin-left: 25px;" :disabled="status">上傳文件</el-button> ? ? ? ? </el-col> ? ? ? </el-upload> ? ? </el-row> ? ? <!--數(shù)據(jù)表格--> ? ? <el-row> ? ? ? <el-col :span="24"> ? ? ? ? <el-form-item> ? ? ? ? ? <el-table v-loading="listLoading" :data="form.tableList" border fit highlight-current-row style="width: 100%;" class="tb-edit" @row-click="tableChange"> ? ? ? ? ? ? <el-table-column align="center" :label="序號" type="index" width="80"/> ? ? ? ? ? ? <!--普通數(shù)據(jù)格--> ? ? ? ? ? ? <el-table-column :label="表頭1" align="center" min-width="100px"> ? ? ? ? ? ? ? <template slot-scope="{row}"> ? ? ? ? ? ? ? ? <span>{{ row.id }}</span> ? ? ? ? ? ? ? </template> ? ? ? ? ? ? </el-table-column> ? ? ? ? ? ? <!--可編輯數(shù)據(jù)格,根據(jù)數(shù)據(jù)狀態(tài)變換輸入還是只顯示--> ? ? ? ? ? ? <el-table-column :label="表頭2" align="center" min-width="100px"> ? ? ? ? ? ? ? <template slot-scope="{row}"> ? ? ? ? ? ? ? ? <el-input v-if="row.seen" ref="tableInput" v-model="row.name" autofocus="autofocus" maxlength="5" @change="tableEdit(row.$index, row)" /> ? ? ? ? ? ? ? ? <span v-else>{{ row.name }}</span> ? ? ? ? ? ? ? </template> ? ? ? ? ? ? </el-table-column> ? ? ? ? ? ? <!--操作按鈕格--> ? ? ? ? ? ? <el-table-column :label="'操作'" align="center" min-width="100px"> ? ? ? ? ? ? ? <template slot-scope="{row}"> ? ? ? ? ? ? ? ? <el-button size="mini" type="danger" @click="delete(row.id)">刪除</el-button> ? ? ? ? ? ? ? </template> ? ? ? ? ? ? </el-table-column> ? ? ? ? ? </el-table> ? ? ? ? </el-form-item> ? ? ? </el-col> ? ? </el-row> ? ? <!--基礎(chǔ)動態(tài)表單區(qū)塊--> ? ? <el-card class="box-card" shadow="never" style="margin-left: 100px;"> ? ? ? <div slot="header" class="clearfix"> ? ? ? ? <span>區(qū)塊名</span> ? ? ? ? <el-button type="primary" v-if="addBt" style="margin-left: 700px;" :disabled="status" @click="addCard">新增</el-button> ? ? ? </div> ? ? ? <div style="text-align: center;"> ? ? ? ? <el-row v-for="(card, index) in cards" :key="card.key"> ? ? ? ? ? <el-col :span="8"> ? ? ? ? ? ? <el-form-item :label="屬性1"> ? ? ? ? ? ? ? <!--根據(jù)需求自己選擇放輸入框還是單選多選框--> ? ? ? ? ? ? </el-form-item> ? ? ? ? ? </el-col> ? ? ? ? ? <el-col :span="8"> ? ? ? ? ? ? <el-form-item :label="屬性2"> ? ? ? ? ? ? ? <!--根據(jù)需求自己選擇放輸入框還是單選多選框--> ? ? ? ? ? ? </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 style="text-align: center; margin-top: 30px; margin-left: -30px"> ? ? ? ? <el-button type="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> import waves from '@/directive/waves' // waves directive,點(diǎn)擊產(chǎn)生水波紋效果,在標(biāo)簽中添加 v-waves import Pagination from '@/components/Pagination' // 分頁組件 export default { ? 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: '請輸入內(nèi)容' ? ? ? ? }], ? ? ? 'model2': [{ ? ? ? ? ? required: true, ? ? ? ? ? message: '請選擇選項(xiàng)' ? ? ? ? }], ? ? ? 'model3': [{ ? ? ? ? ? required: true, ? ? ? ? ? message: '請選擇選項(xiàng)' ? ? ? ? }],? ? ? ? 'fileName': [{ ? ? ? ? ? required: true, ? ? ? ? ? message: '請上傳文件' ? ? ? ? }], ? ? }, ? }, ? // 頁面初始化 ? created() { ? ? // 獲取上一個頁面?zhèn)鬟f過來的參數(shù),id,狀態(tài)等。。。 ? ? this.id = this.$route.query.id ? ? this.action = this.$route.query.action ? }, ? methods: { ? ? // 跳轉(zhuǎn)返回指定的頁面 ? ? goBack() { ? ? ? this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews ? ? ? ? .findIndex(item => item.path === ? ? ? ? ? this.$route.path), 1) ? ? ? this.$router.push({ ? ? ? ? path: '跳轉(zhuǎn)的頁面路徑' ? ? ? }) ? ? }, ? ? getOption() { ? ? ? // 獲取動態(tài)選項(xiàng)框的數(shù)據(jù) ? ? ? const list = [] ? ? ? this.options = list ? ? }, ? ? // 上傳文件 ? ? uploadSuccess(res, file) { ? ? ? this.guideFileIsChange = '1' ? ? ? this.guideFile.file = file.raw ? ? ? this.guideFile.name = file.raw.name ? ? ? this.form.fileName = file.raw.name ? ? }, ? ? // 實(shí)驗(yàn)指導(dǎo)書的信息 ? ? beforeUpload(file) { ? ? ? setTimeout(() => { ? ? ? ? this.$message({ ? ? ? ? ? duration: 1600, ? ? ? ? ? type: 'success', ? ? ? ? ? message: '上傳文件成功!' ? ? ? ? }) ? ? ? }) ? ? ? return true ? ? }, ? ? tableChange() { ? ? ? console.log('點(diǎn)擊表格行觸發(fā)的操作') ? ? }, ? ? // 觸發(fā)出現(xiàn)輸入框 ? ? tableEdit(row.$index, row) { ? ? ? for (const index in this.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('確認(rèn)刪除這一條信息?', '確認(rèn)刪除?', { ? ? ? ? distinguishCancelAndClose: true, ? ? ? ? confirmButtonText: '確定', ? ? ? ? cancelButtonText: '取消' ? ? ? }).then(() => { ? ? ? ? for (let i = 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) { ? ? ? const index = 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>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue安裝依賴npm install時(shí)的報(bào)錯問題及解決
這篇文章主要介紹了Vue安裝依賴npm install時(shí)的報(bào)錯問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-06-06element?table數(shù)據(jù)量太大導(dǎo)致網(wǎng)頁卡死崩潰的解決辦法
當(dāng)頁面數(shù)據(jù)過多,前端渲染大量的DOM時(shí),會造成頁面卡死問題,下面這篇文章主要給大家介紹了關(guān)于element?table數(shù)據(jù)量太大導(dǎo)致網(wǎng)頁卡死崩潰的解決辦法,需要的朋友可以參考下2023-02-02vue項(xiàng)目中?jsconfig.json概念及使用步驟
這篇文章主要介紹了vue項(xiàng)目中?jsconfig.json是什么,本文僅僅簡單介紹了?jsconfig?.json?的一些基本配置,而?jsconfig?.json提供了大量能使我們快速便捷提高代碼效率的方法,需要的朋友可以參考下2022-07-07使用vue-route 的 beforeEach 實(shí)現(xiàn)導(dǎo)航守衛(wèi)(路由跳轉(zhuǎn)前驗(yàn)證登錄)功能
在網(wǎng)站中普遍會遇到這樣的需求,路由跳轉(zhuǎn)前做一些驗(yàn)證,比如登錄驗(yàn)證(未登錄去登錄頁)。下面腳本之家小編給大家?guī)砹耸褂胿ue-route 的 beforeEach 實(shí)現(xiàn)導(dǎo)航守衛(wèi)(路由跳轉(zhuǎn)前驗(yàn)證登錄)功能,感興趣的朋友一起看看吧2018-03-03