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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_24147051/article/details/83541875

使用element制作一个列表页面，并且当点击“查看调查问卷”时弹出弹框。

（图一）

（图二）

（图三）

---

1. 制作一个名叫DataListTable

<DataListTable
      v-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"         <!-- 父组件传递的列表数据 -->
      stripe
      border
      class="table">
      <el-table-column
        prop="student_id"
        label="学生ID"
        width="150"
        align="center"/>
      <el-table-column
        label="老师ID"
        width="150"
        prop="teacher_id"
        align="center"/>
      <el-table-column
        label="班主任ID"
        width="120"
        prop="assistant_id"
        align="center"/>
      <el-table-column
        label="顾问ID"
        width="120"
        prop="consultant_id"
        align="center"/>
      <el-table-column
        label="类型"
        align="center"
        width="180"
        prop="type"/>
      <el-table-column
        label="阶段"
        width="180"
        prop="stage_name"
        align="stage"/>
      <el-table-column
        label="提交日期"
        prop="create_time"
        align="center" />
      <el-table-column
        label="操作"
        prop="id"
        align="center">
        <template slot-scope="scope">
          <el-button
            type="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="查看调查问卷">
      <div
        v-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>