使用element制作一個列表頁面，并且當點擊“查看調查問卷”時彈出彈框。

（圖一）

（圖二）

（圖三）

---

1. 制作一個名叫DataListTable

<DataListTablev-show="showTable":list="list":total-num="totalNum"class="book-manage-table"@pageTurn="getSurveyList"/>

2- 明確該組件里面的參數是父組件里面的值，并進行設置

data() { //data里面的值return {showTable: true,list: [],totalNum: 0,number: 20,page: 1,},getSurveyList(index, name) { //父組件傳遞給子組件的函數const data = { //這里是獲取列表數據的入參page: 1,pagesize: 20,XX: XX,XX: XX,XX:XX,XX,XX};DataResearch.questionList(data) //調用接口獲取列表數據.then(res => {if (res.code === 1) { if (res.data.length !== 0) { //獲得列表數據處理this.showTable = true;this.list = res.data;this.totalNum = res.total;} else {this.showTable = false;this.list = [];}}}).catch();}

3- 操作子組件DataListTable

因為這個我使用了vue框架那么久老三段：

<template></template><script></script><style lang="scss" scoped></style>

三段講解：

第一段：

<template><div class="data-manage-table"><el-table:data="list" <!-- 父組件傳遞的列表數據 -->stripeborderclass="table"><el-table-columnprop="student_id"label="學生ID"width="150"align="center"/><el-table-columnlabel="老師ID"width="150"prop="teacher_id"align="center"/><el-table-columnlabel="班主任ID"width="120"prop="assistant_id"align="center"/><el-table-columnlabel="顧問ID"width="120"prop="consultant_id"align="center"/><el-table-columnlabel="類型"align="center"width="180"prop="type"/><el-table-columnlabel="階段"width="180"prop="stage_name"align="stage"/><el-table-columnlabel="提交日期"prop="create_time"align="center" /><el-table-columnlabel="操作"prop="id"align="center"><template slot-scope="scope"><el-buttontype="text"size="small"@click="goAuditionDetail(scope.row.id)">查看調查問卷</el-button> <!-- 點擊調查問卷時，傳遞對應參數，展示彈框內容 --> </template></el-table-column></el-table><!-- 分頁 --><el-pagination:page-size="page_size":total="totalNum":current-page="currentPage"layout="prev, pager, next, jumper"class="pagination"@current-change="handleCurrentChange"/><!-- 彈框 --><el-dialog:visible.sync="dialogFormVisible"title="查看調查問卷"><divv-for="(item,index) in data":key="index"><el-form class="see-questionnaire"><el-row :gutter="20"><el-col:span="5"class="item-title">標題:</el-col><el-col :span="19">{{ item.question | filterDate }}</el-col></el-row><el-row :gutter="20"><el-col:span="5"class="item-title">問卷鏈接:</el-col><el-col :span="19">{{ item.answer | filterDate }}</el-col></el-row></el-form></div></el-dialog></div> </template>

第二段：

<script> import DataResearch from "service/data-research"; // 引入control層去調用接口export default {filters: {filterDate(val) { //時間兼容處理函數return val || "--";}},props: {list: { //父組件傳遞list值校驗type: Array,default: () => []},totalNum: { //父組件傳遞 totalNum值校驗type: Number,default: 0}},data() { //子組件里面的值設置return {currentPage: 1,page_size: 20,dialogFormVisible: false, //默認不展示彈框formLabelWidth: "120",data: {}};},methods: {handleCurrentChange(val) { //點擊當前頁，傳遞當前頁碼給父組件this.$emit("pageTurn", val);},goAuditionDetail(id) { / /查看調查問卷DataResearch.questionDeatil({ answer_id: id }) // 調用接口數據.then(res => {if (res.code === 0) {this.data = res.data;this.dialogFormVisible = true;}}).catch(() => {this.$message({type: "error",message: "獲取作答詳情失敗，請稍候重試！"});this.dialogFormVisible = true;});}} }; </script>

第三段：

<style lang="scss" scoped> .data-manage-table {.el-table__body-wrapper {overflow: hidden;}.el-dialog__title {font-size: 18px;line-height: 24px;color: #303133;font-weight: normal;}.el-form-item {margin: 5px;}.el-dialog {width: 600px;}.el-table {.table-intro {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;/* autoprefixer: ignore next */-webkit-box-orient: vertical;}}.pagination {margin: 10px 0;text-align: right;}.item-title {font-size: 14px;color: #606266;text-align: right;font-weight: 700;margin-bottom: 10px;}.see-questionnaire {padding-bottom: 20px;} } </style>

總結

以上是生活随笔為你收集整理的使用element UI 快速制作一个列表页面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。