vue前端信息详情页模板
全年无休天天加班 人气:1前言:
自己总结方便自己用的,觉得有用可以参考使用,欢迎留言提出改进意见。
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="提示输入内容" :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="选项1" value="1" /> <el-option label="选项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="请上传实验指导,可以上传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> <!--数据表格--> <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"/> <!--普通数据格--> <el-table-column :label="表头1" align="center" min-width="100px"> <template slot-scope="{row}"> <span>{{ row.id }}</span> </template> </el-table-column> <!--可编辑数据格,根据数据状态变换输入还是只显示--> <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> <!--基础动态表单区块--> <el-card class="box-card" shadow="never" style="margin-left: 100px;"> <div slot="header" class="clearfix"> <span>区块名</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"> <!--根据需求自己选择放输入框还是单选多选框--> </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 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,点击产生水波纹效果,在标签中添加 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: '请输入内容' }], 'model2': [{ required: true, message: '请选择选项' }], 'model3': [{ required: true, message: '请选择选项' }], 'fileName': [{ required: true, message: '请上传文件' }], }, }, // 页面初始化 created() { // 获取上一个页面传递过来的参数,id,状态等。。。 this.id = this.$route.query.id this.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() { // 获取动态选项框的数据 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 }, // 实验指导书的信息 beforeUpload(file) { setTimeout(() => { this.$message({ duration: 1600, type: 'success', message: '上传文件成功!' }) }) return true }, tableChange() { console.log('点击表格行触发的操作') }, // 触发出现输入框 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('确认删除这一条信息?', '确认删除?', { 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>
加载全部内容