ant design vue 之a-table表格的封装

最新推荐文章于 2024-09-30 15:33:18 发布

小小liang

最新推荐文章于 2024-09-30 15:33:18 发布

阅读量2.8k

点赞数 5

分类专栏： vue + antd 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_47409897/article/details/120909667

版权

vue + antd 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在 Vue 中封装 Ant Design Vue 的 a-table，创建 ListTable 组件，并展示了如何使用该组件，包括表格数据、表头自定义、操作列插槽等功能。同时还提供了组件的使用示例，如添加查看详情和编辑操作的按钮。

摘要由CSDN通过智能技术生成

ant design vue 之a-table表格的封装

在这里插入图片描述

ListTable组件

<template>
  <div class="list_table">
    <!-- :scroll="{ y: 540 }" loading -->
    <a-table
      :columns="tableTitle"
      :data-source="tableData"
      bordered
      size="small"
      :row-selection="rowSelection"
      :pagination="false"
    >
      <!-- 插槽 按钮 -->
      <template slot-scope="text,record" slot="action">
        <slot :scope="record" name="operation"></slot>
      </template>
    </a-table>
  </div>
</template>

<script>
/**
 * 组件：Table
 * 参数：
 * tableTitle：表头的数据；tableData：表格的数据；
 * rowSelection: 是否有复选框  -> :rowSelection="{ selectedRowKeys: selectedRowKeys,   onChange: onSelectChange }"
 * 插槽使用方式：
 * * tableTitle表头数据之中 添加 { title: "操作", dataIndex: "operate", width: 100, scopedSlots: { customRender: "action" }},
 * *  <ListTable><template v-slot:operation="scopeVal">
        <button class="blue" @click="view(scopeVal.scope)">详情</button>
        <button class="blue" @click="edit(scopeVal.scope)">编辑</button>
      </template></ListTable >
 */
export default {
  name: "ListTable",
  props: {
    tableTitle: {
      type: Array,
      default() {
        return [];
      },
      required: true,
    },
    tableData: {
      type: Array,
      default() {
        return [];
      },
      required: true,
    },
    rowSelection: {
      default: undefined,
    },
  },
  components: {},
  data() {
    return {};
  },
  methods: {
  },
};
</script>
<style  lang="scss" scoped>
.list_table {
  // 修改表头
  // ::v-deep .ant-table-thead > tr{
  //   background: #ff0!important;
  // }
}
</style>

使用组件

<template>
  <div>
    <ListTable
      :tableTitle="tableTitle"
      :tableData="tableData"
      :rowSelection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
      }"
    >
      <template v-slot:operation="scopeVal">
        <button class="blue" @click="view(scopeVal.scope)">详情</button>
        <button class="blue" @click="edit(scopeVal.scope)">编辑</button>
      </template>
    </ListTable>

    <ListTable
      :tableTitle="tableTitle2"
      :tableData="tableData"
      :rowSelection="{
        selectedRowKeys: selectedRowKeys2,
        onChange: onSelectChange2,
      }"
    >
      <template v-slot:operation="scopeVal">
        <button class="blue" @click="add(scopeVal.scope)">新增</button>
      </template>
    </ListTable>

    <ListTable :tableTitle="tableTitle3" :tableData="tableData"></ListTable>

    <div class="paginationWrap">
      <a-pagination
        class="paginationBtn"
        show-size-changer
        show-quick-jumper
        :total="100"
        :pageSizeOptions="['10', '20', '50', '100']"
        :current="currentPage"
        :pageSize="currentPageSize"
        @change="pageChange"
        @showSizeChange="pageSizeChange"
      />
    </div>
  </div>
</template>

<script>
import ListTable from "./childCom/ListTable.vue";
export default {
  name: "About1",
  components: {
    ListTable,
  },
  data() {
    return {
      tableTitle: [
        {
          title: "Name",
          dataIndex: "name",
          key: "name",
          scopedSlots: { customRender: "name" },
        },
        {
          title: "Age",
          dataIndex: "age",
          key: "age",
          width: 80,
        },
        {
          title: "Address",
          dataIndex: "address",
          key: "address 1",
          ellipsis: true,
        },
        {
          title: "Long Column Long Column Long Column",
          dataIndex: "address",
          key: "address 2",
          ellipsis: true,
        },
        {
          title: "Long Column Long Column",
          dataIndex: "address",
          key: "address 3",
          ellipsis: true,
        },
        {
          title: "Long Column",
          dataIndex: "address",
          key: "address 4",
          ellipsis: true,
        },
        {
          title: "操作",
          dataIndex: "operate",
          width: 200,
          scopedSlots: { customRender: "action" },
        },
      ],
      tableData: [
        {
          key: "1",
          name: "John Brown",
          age: 32,
          address: "New York No. 1 Lake Park, New York No. 1 Lake Park",
          tags: ["nice", "developer"],
        },
        {
          key: "2",
          name: "Jim Green",
          age: 42,
          address: "London No. 2 Lake Park, London No. 2 Lake Park",
          tags: ["loser"],
        },
        {
          key: "3",
          name: "Joe Black",
          age: 32,
          address: "Sidney No. 1 Lake Park, Sidney No. 1 Lake Park",
          tags: ["cool", "teacher"],
        },
      ],
      tableTitle2: [
        {
          title: "Name",
          dataIndex: "name",
          key: "name",
          scopedSlots: { customRender: "name" },
        },
        {
          title: "Age",
          dataIndex: "age",
          key: "age",
          width: 80,
        },
        {
          title: "Address",
          dataIndex: "address",
          key: "address 1",
          ellipsis: true,
        },
        {
          title: "Long Column Long Column Long Column",
          dataIndex: "address",
          key: "address 2",
          ellipsis: true,
        },
        {
          title: "Long Column Long Column",
          dataIndex: "address",
          key: "address 3",
          ellipsis: true,
        },
        {
          title: "Long Column",
          dataIndex: "address",
          key: "address 4",
          ellipsis: true,
        },
        {
          title: "操作",
          dataIndex: "operate",
          width: 100,
          scopedSlots: { customRender: "action" },
        },
      ],
      tableTitle3: [
        {
          title: "Name",
          dataIndex: "name",
          key: "name",
          scopedSlots: { customRender: "name" },
        },
        {
          title: "Age",
          dataIndex: "age",
          key: "age",
          width: 80,
        },
        {
          title: "Address",
          dataIndex: "address",
          key: "address 1",
          ellipsis: true,
        },
        {
          title: "Long Column Long Column Long Column",
          dataIndex: "address",
          key: "address 2",
          ellipsis: true,
        },
        {
          title: "Long Column Long Column",
          dataIndex: "address",
          key: "address 3",
          ellipsis: true,
        },
        {
          title: "Long Column",
          dataIndex: "address",
          key: "address 4",
          ellipsis: true,
        },
      ],
      selectedRowKeys: [],
      selectedRowKeys2: [],

      currentPage: 1,
      currentPageSize: 20,
    };
  },
  mounted() {
    this.createBtn();
  },
  methods: {
    view(val) {
      console.log("viewviewview", val);
    },
    edit(val) {
      console.log("editeditedit", val);
    },
    add(val) {
      console.log("addaddadd", val);
    },

    onSelectChange(selectedRowKeys) {
      console.log("onSelectChange", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    onSelectChange2(selectedRowKeys2) {
      console.log("onSelectChange2", selectedRowKeys2);
      this.selectedRowKeys2 = selectedRowKeys2;
    },
  },
};
</script>