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

这篇“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 >      <!--基本输入框-->      <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="提示单选"  :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="提示多选"  @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  />          </el-form-item>        </el-col>        <el-col :span="4">          <el-button type="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-table v-loading="listLoading" :data="form.tableList" border fit highlight-current-row  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" >      <div slot="header" class="clearfix">        <span>区块名</span>        <el-button type="primary" v-if="addBt"  :disabled="status" @click="addCard">新增</el-button>      </div>      <div >        <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 >        <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-wavesimport 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>

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