iView使用中的注意项

官网

https://www.iviewui.com/components/table

Table

代码语言：javascript复制

<template>
  <div>
    <Table border :columns="table_header" :data="table_data">
      <template slot-scope="{ row }" slot="name">
        <strong>{{ row.name }}</strong>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <Button
          type="primary"
          size="small"
          style="margin-right: 5px"
          @click="show(index)"
          >查看</Button
        >
        <Button type="error" size="small" @click="remove(index)">删除</Button>
      </template>
    </Table>
  </div>
</template>

<script>
export default {
  name: "assess_detail",
  data: function() {
    return {
      table_header: [
        {
          title: "Name",
          slot: "name"
        },
        {
          title: "Age",
          key: "age"
        },
        {
          title: "Address",
          key: "address"
        },
        {
          title: "Action",
          slot: "action",
          width: 150,
          align: "center"
        }
      ],
      table_data: [
        {
          name: "John Brown",
          age: 18,
          address: "New York No. 1 Lake Park"
        },
        {
          name: "Jim Green",
          age: 24,
          address: "London No. 1 Lake Park"
        },
        {
          name: "Joe Black",
          age: 30,
          address: "Sydney No. 1 Lake Park"
        },
        {
          name: "Jon Snow",
          age: 26,
          address: "Ottawa No. 2 Lake Park"
        }
      ]
    };
  },
  methods: {
    show(index) {
      this.$Modal.info({
        title: "User Info",
        content: `Name：${this.data6[index].name}<br>Age：${this.data6[index].age}<br>Address：${this.data6[index].address}`
      });
    },
    remove(index) {
      this.data6.splice(index, 1);
    }
  }
};
</script>

Page

代码语言：javascript复制

<template>
  <div>
    <Page
      :current="table_page.current"
      :page-size="table_page.page_size"
      :page-size-opts="table_page.page_size_opts"
      :total="table_page.total"
      prev-text="上一页"
      next-text="下一页"
      show-elevator
      show-sizer
      show-total
    />
  </div>
</template>

<script>
export default {
  name: "assess_detail",
  data: function() {
    return {
      table_page: {
        current: 1,
        page_size: 10,
        page_size_opts: [10, 20, 30],
        total: 100
      }
    };
  },
  methods: {

  }
};
</script>

弹窗

代码语言：javascript复制

<Modal
       v-model="show_detail_dialog"
       width="800"
       draggable
       sticky
       scrollable
       :mask="false"
       title="我是标题"
       >

</Modal>

提示信息

代码语言：javascript复制

this.$Message.info(res.msg);
this.$Message.warning(res.msg);
this.$Message.success(res.msg);
this.$Message.error(res.msg);

加载中

代码语言：javascript复制

const msg = this.$Message.loading({
    content: 'Loading...',
    duration: 0
});

取消加载中

代码语言：javascript复制

setTimeout(msg, 3000);

或者用全局销毁

代码语言：javascript复制

this.$Message.destroy();

table

0 人点赞