iview

<template>
  <div id="app">
    <Table :columns="columns" :data="pageData" :border="true">
      <Page
        :total="progressData.length"
        :current="page"
        :page-size="10"
        show-total
        @on-change="handlerPage"
        slot="footer"
        style="text-align: right"
      />
    </Table>

    <Modal
      v-model="modal"
      title="Common Modal dialog box title"
      @on-ok="ok"
      @on-cancel="cancel"
    >
      <p>Content of dialog</p>
      <p>Content of dialog</p>
      <p>Content of dialog</p>
    </Modal>
  </div>
</template>

<script>
import { result } from "./../mock/table";
export default {
  name: "App",
  data() {
    return {
      modal: false,
      columns: [
        {
          title: "Name",
          key: "name",
          render: (h, params) => {
            return h("div", [
              h("Icon", {
                props: {
                  type: "person",
                },
              }),
              h("strong", params.row.name),
            ]);
          },
        },
        {
          title: "Age",
          key: "age",
        },
        {
          title: "Address",
          key: "address",
        },
        {
          title: "Action",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                  },
                  style: {
                    marginRight: "5px",
                  },
                  on: {
                    click: () => {
                      this.show(params.index);
                    },
                  },
                },
                "View"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small",
                  },
                  on: {
                    click: () => {
                      this.remove(params.index);
                    },
                  },
                },
                "Delete"
              ),
            ]);
          },
        },
      ],
      progressData: [], //调用接口获取数据，也可以是自己编写的数据
      pageData: [], //表格数据（随着分页而变化）
      page: 1, //默认为第一页
    };
  },
  computed: {},
  methods: {
    ok() {
      this.modal = false;
      console.log("ok", this.modal);
    },
    cancel() {
      this.modal = false;
      console.log("cancel", this.modal);
    },
    show() {
      this.$Message.info("This is a show tip");
      this.modal = true;
      console.log("show", this.modal);
    },
    remove() {
      this.$Message.info("This is a remove tip");
      this.modal = true;
      console.log("remove", this.modal);
    },
    loadData() {
      this.progressData = [];
      //接口参数
      //接口
      this.progressData = result;
      if (this.page) {
        this.pageData = this.progressData.slice(0, 10);
      } else {
        this.changeData();
      }
    },
    //改变页码时的方法
    handlerPage(page) {
      this.changeData(page);
    },
    //修改数据
    changeData(page) {
      this.page = page;
      if (this.progressData.length > 10) {
        this.pageData = this.progressData.slice((page - 1) * 10, page * 10);
      } else {
        this.pageData = this.progressData;
      }
    },
  },
  created() {},
  mounted() {
    this.loadData();
  },
};
</script>

export const result = [
    { name: "10", age: "2", address: "3" },
    { name: "11", age: "2", address: "3" },
    { name: "12", age: "2", address: "3" },
    { name: "13", age: "2", address: "3" },
    { name: "14", age: "2", address: "3" },
    { name: "11", age: "2", address: "3" },
    { name: "14", age: "2", address: "3" },
    { name: "11", age: "2", address: "3" },
    { name: "41", age: "2", address: "3" },
    { name: "14", age: "2", address: "3" },
    { name: "114", age: "2", address: "3" },
    { name: "114", age: "2", address: "3" },
    { name: "1563", age: "2", address: "3" },
    { name: "1365", age: "2", address: "3" },
    { name: "1365", age: "2", address: "3" },
    { name: "13", age: "2", address: "3" },
    { name: "5631", age: "2", address: "3" },
    { name: "1563", age: "2", address: "3" },
    { name: "1653", age: "2", address: "3" },
    { name: "3561", age: "2", address: "3" },
    { name: "1", age: "2", address: "3" },
    { name: "1533", age: "2", address: "3" },
    { name: "1", age: "2", address: "3" },
    { name: "135", age: "2", address: "3" },
    { name: "1", age: "2", address: "3" },
    { name: "1", age: "2", address: "3" },
    { name: "351", age: "2", address: "3" },
    { name: "1", age: "2", address: "3" },
    { name: "1365", age: "2", address: "3" },
    { name: "13566", age: "2", address: "3" },
    { name: "1", age: "2", address: "3" },
    { name: "3561", age: "2", address: "3" },
    { name: "1", age: "2", address: "3" },
    { name: "1", age: "2", address: "3" },
    { name: "1", age: "2", address: "3" },
    { name: "1563", age: "2", address: "3" },
    { name: "1", age: "2", address: "3" },
    { name: "1", age: "2", address: "3" },
    { name: "3561", age: "2", address: "3" },
    { name: "1", age: "2", address: "3" },
    { name: "1", age: "2", address: "3" },
    { name: "1563", age: "2", address: "3" },
    { name: "1", age: "2", address: "3" },
    { name: "1356", age: "2", address: "3" },
    { name: "1", age: "2", address: "3" },
    { name: "1356", age: "2", address: "3" },
    { name: "1536", age: "2", address: "3" },
    { name: "1", age: "2", address: "3" },
    { name: "1245", age: "2", address: "3" },
    { name: "1", age: "2", address: "3" },
    { name: "71", age: "2", address: "3" },
    { name: "1", age: "2", address: "3" },
    { name: "1", age: "2", address: "3" },
    { name: "178", age: "2", address: "3" },
    { name: "1", age: "2", address: "3" },
    { name: "1", age: "2", address: "3" },
    { name: "178", age: "2", address: "3" },
    { name: "1", age: "2", address: "3" },
    { name: "1542", age: "2", address: "3" },
    { name: "1", age: "2", address: "3" },
    { name: "152", age: "2", address: "3" }
]

iview

原文：https://www.cnblogs.com/lceihen/p/14715934.html