使用element UI 快速制作一个列表页面

使用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 快速制作一个列表页面相关推荐

如何快速开发H5列表页面
小编最近在做一个任务:要求实现一个在微信公众号里面的H5列表页面.拿到这个任务我们首先要进行需求分析,由于是在微信公众号也就是手机里面的H5列表,所以就不可能像PC上的列表页面那样进行分页处理,应该按 ...
用Easy UI快速搭建一个后台
今天来分享一个我前端技术-------如何使用Easy UI快速搭建一个后台,本博主也只是在官网文档学习了一个小时左右,就已经会使用了,当你学了Easy UI后,一个后台短短两分钟就可以over了,好 ...
使用html和css制作一个小米商城页面
使用html和css制作一个小米商城页面创作不易,可否给作者点个赞再走 html部分: /** * author 阿木木 * date 10/01 14:32 * / `<html>&l ...
Unity使用Shader快速制作一个圆形遮罩
Unity使用Shader快速制作一个圆形遮罩如何用Shader来做出圆形.切倒角和边缘虚化 Unity使用Shader快速制作一个圆形遮罩橙子前言一.创建Shader 二.创建Material ...
【Houdini】如何利用黑白的图片在Houdini中快速制作一个立体的模型
如何利用黑白的图片在Houdini中快速制作一个立体的模型 1.首先在Houdini右下角的Network中按tab创建一个Geometry 2.点击进入后,按tab创建一个trace 3.在trac ...
智能机器人c语言编程,【图片】教你快速制作一个简单的人工智能机器人（懂编程的人进来看）【科幻吧】_百度贴吧...
该楼层疑似违规已被系统折叠隐藏此楼查看此楼教你快速制作一个简单的人工智能机器人(懂编程的人进来看) 本文我首发于"人工智能吧",叫做<机器人理解人类语言>和< ...
实战教程｜使用知晓云快速制作一个简单的个人博客
我们在向大家征集开发课程大纲后,便陆续收到了很多建议.大家的热情与支持,是我们持续更新的动力. 由于大家的课程建议比较散,需要结合实际案例进行讲解,因此我们先从最简单的开始.本文将介绍如何通过知晓云的 ...
如何快速制作一个H5单页面网站
在没有自助建站之前,做单页面网站也需要耗费大量的时间,编写代码,调试,上传发布一个都不能少.而有了域名版的建站宝盒后,做单页面网站的时间可以缩短至20分钟左右,还不用花钱.下面给大家介绍操作方法,有需 ...
快速制作一个chrome插件
说在前面在我日常开发以及娱乐生活中,浏览器是我使用频率较高的一个应用,当我大学拥有第一部电脑开始,之后不论电脑换成什么,以及使用的是什么系统,我的首选浏览器都是Chrome,不仅仅是因为其速度快,更 ...

使用element UI 快速制作一个列表页面

使用element UI 快速制作一个列表页面相关推荐

最新文章

热门文章