vue前端信息详情页模板梳理
vue前端信息详情页模板梳理
前言：
自己总结方便自己用的，觉得有用可以参考使用，欢迎留言提出改进意见。
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>