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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。