Mẫu Bảng Vue 3: Cách đơn giản nhất để Thêm Bảng vào Ứng dụng Của Bạn

am_table_vuejs_componenet

Mẫu này sẽ giúp bạn bắt đầu với phát triển Vue 3 bằng cách cung cấp một bảng sẵn sàng cung cấp các dịch vụ khác nhau và tích hợp dễ dàng với các dự án khác

Bản Demo

Khám phá Demo.

Tính năng

• Sắp xếp
• Cho phép người dùng nhấp vào tiêu đề bảng để sắp xếp dữ liệu theo thứ tự tăng dần hoặc giảm dần.
• Lọc
• Cho phép lọc dữ liệu dựa trên các loại khác nhau, như văn bản, số, ngày, v.v.
• Thực hiện đầu vào lọc hoặc menu thả xuống cho mỗi cột để người dùng nhập tiêu chí lọc.
• Áp dụng bộ lọc động khi người dùng nhập tiêu chí của họ.
• Phân trang
• Chia dữ liệu thành các trang và hiển thị một số hàng cố định trên mỗi trang.
• Cung cấp điều khiển phân trang (ví dụ: trang trước, trang sau, số trang) để điều hướng giữa các trang.
• Cho phép người dùng cấu hình số hàng trên mỗi trang.
• Tìm kiếm
• Thực hiện đầu vào tìm kiếm để cho phép người dùng tìm kiếm dữ liệu theo bất kỳ trường nào.
• Cập nhật động bảng để chỉ hiển thị các hàng phù hợp với tiêu chí tìm kiếm.
• Cung cấp tùy chọn thực hiện tìm kiếm phân biệt hoặc không phân biệt chữ hoa chữ thường.
• Chế độ Thẻ
• Cung cấp tùy chọn để chuyển đổi giữa chế độ xem bảng và chế độ xem thẻ.
• Hiển thị thông tin liên quan trong thẻ, bao gồm hình ảnh, tiêu đề, mô tả, v.v.
• Thiết kế Tương thích
• Đảm bảo rằng chế độ xem bảng hoặc thẻ tương thích và thích nghi với các kích thước màn hình khác nhau.
• Hành vi phản hồi cho cột, phân trang và bất kỳ yếu tố liên quan nào khác.
• Chế độ Tối
• Ẩn trường
• Bạn có thể ẩn trường một cách đơn giản nhất
• Các Hàng Được Chọn
• Bạn có thể chọn các hàng bằng cách sử dụng hộp kiểm để xuất khẩu hoặc thực hiện các thao tác khác

Cài đặt

Cài đặt amtablevuecomponenet với npm

  npm install am_table_vue
  npm i am_table_vue

Cách sử dụng/Ví dụ

<template>
  <AmhVueTable
    :data="state.data"
    :columns="state.columns"
    :config="state.config"
  >
    <!-- to render the html code -->
    <template v-slot="{ column, row }">
      <div v-if="column.title == 'Actions'">
        <button @click="add(row.name)">add</button>
      </div>
    </template>
  </AmhVueTable>
</template>
<script setup>
   import { reactive } from "vue";
  import AmhVueTable from "am_table_vue";
   // import css
   import "am_table_vue/dist/style.css";

   const state = reactive({
     data: [
       {
         name: "ahmed",
         age: 22,
         adresse:'Tamri Agadir'
         aviable: 1,
         date: new Date("12/05/2022"),
         image: "https://via.placeholder.com/640x480.png/0033aa?text=dolore",
       },
       {
         name: "hasan",
         age: 33,
         adresse:'Taghazout Agadir',
         aviable: 1,
         date: new Date("12/06/2022"),
         image: "https://via.placeholder.com/640x480.png/0033aa?text=dolore",
       },
     ],

     columns: [
       {
         title: "Name",
         field: "name",
         EnableFilter: true,
         sortable: true,
         filterOptions: {
           InputType: "text",
           placeholder: "filter By Name",
         },
       },
        {
       title: "Adresse",
       field: "adresse",
       hidden:true,
       EnableFilter: true,
       sortable: true,
       filterOptions: {
         InputType: "text",
         placeholder: "filter By Name",
       },
     },

       {
         title: "AGE",
         field: "age",
         EnableFilter: true,
         sortable: true,
         filterOptions: {
           InputType: "text",
           placeholder: "filter By age",
         },
       },
       {
         title: "Aviable",
         field: "aviable",
         EnableFilter: true,
         sortable: true,
         filterOptions: {
           InputType: "select",
           placeholder: "filter By aviablity",
           filterSelectOptions: [
             { title: "all", selected: true },
             { title: "aviable", value: "1" },
             { title: "non aviable", value: "0" },
           ],
         },
       },
       {
         title: "Date",
         field: "date",
         isDate: true,
         dateMomentFormat: "L", // use momentjs formats
         EnableFilter: true,
         filterOptions: {
           InputType: "date",
           placeholder: "filter By Date",
         },
       },
       {
         title: "Image",
         field: "image",
         Cssclass: "imageClass",
         isImage: true,
         EnableFilter: false,
       },
       {
         title: "Actions",
         isHtml: true,
         EnableFilter: false,
       },
     ],
     config: {
       EnableSearch: true,
       searchplaceholder: "Search in Table",
       EnableUseDarkMode: true,
       EnableCardsTemp: true,
       SearchInFields: ["name", "age", "date"],
       EnablePagination: true,
       PaginationConfig: {
         itemsPerPage: 3,
         CurrentPage: 1,
       },
     },
   });

   const add = (name) => {
     console.log(name);
   };
</script>

Các thuộc tính có sẵn

Sự kiện có sẵn

Giải thích cách sử dụng thuộc tính config

Tại đây chúng ta định nghĩa cấu hình bảng

config: {

EnableSearch: Đúng hoặc Sai nếu bạn muốn kích hoạt tìm kiếm trên toàn bảng,

searchplaceholder: placeholder cho việc tìm kiếm trên toàn bảng,

EnableUseDarkMode: đúng hoặc sai nếu bạn muốn sử dụng chế độ tối hay không,

SearchInFields: [“field1”, “field2”], // Xác định các trường được sử dụng trong tìm kiếm toàn diện

EnableCardsTemp: đúng hoặc sai nếu bạn muốn cung cấp tùy chọn để chuyển đổi giữa chế độ xem bảng và chế độ xem thẻ,

EnablePagination: đúng hoặc sai để kích hoạt phân trang hay không,

PaginationConfig: { // nếu phân trang được kích hoạt, đối tượng này dùng để cấu hình phân trang

itemsPerPage: 3, // số mục trên mỗi trang
Cảm ơn bạn!
CurrentPage: 1, // trang bắt đầu hoặc trang hiện tại

},

},

Giải thích cách sử dụng thuộc tính columns

Tại đây chúng ta định nghĩa các cột

columns: [ {

title: Tiêu đề được định nghĩa cho cột sẽ xuất hiện trong các cột bảng,

field: Trường dữ liệu như nó có trong đối tượng dữ liệu để lấy dữ liệu liên quan đến trường này,

hidden: đúng hoặc sai nếu bạn muốn ẩn các trường hay không,

EnableFilter: đúng hoặc sai để cho phép lọc bảng sử dụng cột này,

EnableselectOptions: đúng hoặc sai để cho phép chọn các hàng để xuất khẩu hoặc thực hiện các thao tác khác,

sortable: đúng hoặc sai để cho phép sắp xếp bảng sử dụng cột này,

isDate: đúng hoặc sai chúng ta xác định nếu trường này là cho ngày,

dateMomentFormat: trường này là cho ngày, chọn định dạng từ momentjs giữa ‘l’, ‘LL’, ‘LLL’, ‘lll’, ‘LLLL’, ‘llll’, ‘L’,

isImage: đúng hoặc sai chúng ta xác định nếu trường này là cho hình ảnh,

isHtml: đúng hoặc sai chúng ta xác định nếu trường này là cho việc hiển thị mã HTML,

filterOptions: Một đối tượng với đó chúng ta định nghĩa các cài đặt lọc { InputType: loại đầu vào lọc dạng văn bản cho số và chuỗi hoặc chọn hoặc ngày để lọc ngày,

filterSelectOptions: [ // nếu InputType là chọn { title: ‘tiêu đề tùy chọn chọn’, value: ‘giá trị tùy chọn chọn’ }, ]

placeholder: “placeholder cho phần tử đầu vào lọc”,

},

},

]

<script setup>
  import { reactive } from "vue";

  const state = reactive({
    // exemple
    columns: [
      {
        title: "Name",
        field: "name",
        isImage: false,
        isHtml: false,
        isDate: false,
        EnableFilter: true,
        sortable: true,
        filterOptions: {
          InputType: "text",
          placeholder: "filter By name",
        },
      },
    ],
  });
</script>

Giải thích cách sử dụng thuộc tính data

Cảm ơn bạn!
Bảng này chứa các đối tượng có chứa dữ liệu để điền vào bảng từ trường được chỉ định trong cột cho mỗi trường

<script setup>
  import { reactive } from "vue";

  const state = reactive({
    data: [
      {
        name: "ahmed",
        age: 22,
        aviable: 1,
        date: new Date("12/05/2022"),
        image: "https://via.placeholder.com/640x480.png/0033aa?text=dolore",
      },
    ],
  });
</script>

ẩn trường

<template>
  <AmhVueTable
    :data="state.data"
    :columns="state.columns"
    :config="state.config"
  >
  </AmhVueTable>
</template>
<script setup>
  import { reactive } from "vue";
  import AmhVueTable from "am_table_vue";
   // import css
   import "am_table_vue/dist/style.css";

  const state = reactive({
   data: [
      {
        name: "ahmed",
        age: 22,
        aviable: 1,
        date: new Date("12/05/2022"),
        image: "https://via.placeholder.com/640x480.png/0033aa?text=dolore",
      },

    ],

    columns: [
      {
        title: "Name",
        field: "name",
        hidden:true , // to hide field name
        EnableFilter: true,
        sortable: true,
        filterOptions: {
          InputType: "text",
          placeholder: "filter By Name",
        },
      },
      {
        title: "AGE",
        field: "age",
        EnableFilter: true,
        sortable: true,
        filterOptions: {
          InputType: "text",
          placeholder: "filter By age",
        },
      },
    ]
     config: {
      EnableSearch: true,
      searchplaceholder: "Search in Table",
      EnableUseDarkMode: true,
      EnableCardsTemp: true,
      SearchInFields: ["name", "age", "date"],
      EnablePagination: true,
      PaginationConfig: {
        itemsPerPage: 3,
        CurrentPage: 1,
      },
    },
  });
</script>

Chọn trường hàng

<template>
  <!-- @SelectedRows-Changed : This event occurs whenever a row selection -->
  <AmhVueTable
    :data="state.data"
    :columns="state.columns"
    :config="state.config"
    @SelectedRows-Changed="GetCheckedData"
  >
  </AmhVueTable>
</template>
<script setup>
  import { reactive } from "vue";
  import AmhVueTable from "am_table_vue";
   // import css
   import "am_table_vue/dist/style.css";

  const state = reactive({
   data: [
      {
        name: "ahmed",
        age: 22,
        aviable: 1,
        date: new Date("12/05/2022"),
        image: "https://via.placeholder.com/640x480.png/0033aa?text=dolore",
      },

    ],

    columns: [
      {
        title: "Name",
        field: "name",
        hidden:false ,
        EnableFilter: true,
        sortable: true,
        filterOptions: {
          InputType: "text",
          placeholder: "filter By Name",
        },
      },
      {
        title: "AGE",
        field: "age",
        EnableFilter: true,
        sortable: true,
        filterOptions: {
          InputType: "text",
          placeholder: "filter By age",
        },
      },
    ]
     config: {
      EnableSearch: true,
      searchplaceholder: "Search in Table",
      EnableUseDarkMode: true,
      EnableCardsTemp: true,
      SearchInFields: ["name", "age", "date"],
      EnablePagination: true,
      EnableselectOptions:true, // Enable Select Rows
      PaginationConfig: {
        itemsPerPage: 3,
        CurrentPage: 1,
      },
    },
  });

  // for use selected data :
  const GetCheckedData = (data) => {
    // selected data
    console.log(data)
  }
</script>

Chi tiết tải xuống:

Tác giả: AbderrahmaneAmerhhi
Nguồn: https://github.com/AbderrahmaneAmerhhi/amtablevuecomponenet

Cảm ơn bạn!