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-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>

以上就是關于“vue前端信息詳情頁怎么實現”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。