利用ELE-UI 进行对话框引入列表显示数据

  <template>
  <div class="contion">
    <button @click="dialogVisible = true">显示学生列表</button>
    <el-dialog title="学生列表" :visible.sync="dialogVisible">
      <ul>
        <el-table :data="pagedTableData" style="width: 100%">
      <el-table-column label="日期" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.name }}</p>
            <p>住址: {{ scope.row.address }}</p>
            <el-tag type="success">一般类疾病</el-tag>
            <el-tag type="danger">严重类疾病</el-tag>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="totalItemsCount"
      :current-page="currentPage"
      :page-size="pageSize"
      @size-change="onPageSizeChange"
      @current-change="onCurrentPageChange"
    >
    </el-pagination>
      </ul>
    </el-dialog>
  </div>
</template>

  <script>
export default {
  computed: {
    totalPages() {
      // 根据总记录数和每页大小计算总页数，向下取整
      return Math.ceil(this.tableData.length / this.pageSize);
    },
  },
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      pagedTableData: [],
      currentPage: 1,
      pageSize: 5,
      dialogVisible: true,
    };
  },
  created() {
    this.totalItemsCount = this.tableData.length;
    this.updatePagedTableData();
  },
  methods: {
    onPageSizeChange(newPageSize) {
      this.pageSize = newPageSize;
      this.updatePagedTableData();
    },
    onCurrentPageChange(newPageNumber) {
      this.currentPage = newPageNumber;
      this.updatePagedTableData();
    },
    updatePagedTableData() {
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      // 注意：这里应该是 this.pagedTableData 而不是 this.pagedtableData
      this.pagedTableData = this.tableData.slice(startIndex, endIndex);
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const deletedRow = this.tableData.splice(index, 1);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      this.updatePagedTableData();
    },
  },
};
</script>

其他组件使用：

<template>
 <el-button type="text" @click="dialogTableVisible = true"><List></List></el-button>
</template>
<script>
import List from "./List.vue";
export default {
components: {List},
}
</script>