Quasar là một phổ biến Vue UI thư viện để phát triển ngoại hình đẹp Vue .

Trong bài viết này, chúng ta sẽ xem xét cách tạo Vue với Giao diện người dùng chuẩn tinh thư viện.

Không hiển thị dữ liệu

Chúng tôi có thể hiển thị một cái gì đó khi không có dữ liệu nào được hiển thị trong bảng của chúng tôi.

Ví dụ, chúng ta có thể viết:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>
  <body >
    <script src="https://cdn.jsdelivr.net/npm/[email protected]^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.min.js"></script>
    <div >
      <q-layout
        view="lHh Lpr lFf"
        container
        style="height: 100vh;"
        
      >
        <div >
          <q-table
            title="Treats"
            :data="data"
            :columns="columns"
            :filter="filter"
            no-data-label="I didn't find anything for you"
            no-results-label="The filter didn't uncover any results"
            row-key="name"
          >
            <template v-slot:top-right>
              <q-input
                borderless
                dense
                debounce="300"
                v-model="filter"
                placeholder="Search"
              >
                <q-icon slot="append" name="search"></q-icon>
              </q-input>
            </template>

            <template v-slot:no-data="{ icon, message, filter }">
              <div>No data</div>
            </template>
          </q-table>
        </div>
      </q-layout>
    </div>
    <script>
      const columns = [
        {
          name: "name",
          required: true,
          label: "Dessert",
          align: "left",
          field: (row) => row.name,
          format: (val) => `${val}`,
          sortable: true
        },
        {
          name: "calories",
          align: "center",
          label: "Calories",
          field: "calories",
          sortable: true
        },
        { name: "fat", label: "Fat (g)", field: "fat", sortable: true },
        {
          name: "calcium",
          label: "Calcium (%)",
          field: "calcium",
          sortable: true,
          sort: (a, b) => parseInt(a, 10) - parseInt(b, 10)
        }
      ];
      const data = [
        {
          name: "Frozen Yogurt",
          calories: 159,
          fat: 6.0,
          calcium: "14%"
        },
        {
          name: "Ice cream sandwich",
          calories: 237,
          fat: 9.0,
          calcium: "8%"
        },
        {
          name: "Eclair",
          calories: 262,
          fat: 16.0,
          calcium: "6%"
        },
        {
          name: "Honeycomb",
          calories: 408,
          fat: 3.2,
          calcium: "0%"
        },
        {
          name: "Donut",
          calories: 452,
          fat: 25.0,
          calcium: "2%"
        },
        {
          name: "KitKat",
          calories: 518,
          fat: 26.0,
          calcium: "12%"
        }
      ];
      new  Vue ({
        el: "#q-app",
        data: {
          columns,
          data,
          filter: ""
        }
      });
    </script>
  </body>
</html>

để thêm điều đó.

Chúng tôi điền vào vùng không có dữ liệu với nội dung chúng tôi muốn hiển thị khi không có dữ liệu nào được hiển thị trong bảng.

Ẩn thanh dưới cùng

Chúng ta có thể ẩn thanh dưới cùng bằng cách thêm hỗ trợ ẩn dưới:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>
  <body >
    <script src="https://cdn.jsdelivr.net/npm/[email protected]^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.min.js"></script>
    <div >
      <q-layout
        view="lHh Lpr lFf"
        container
        style="height: 100vh;"
        
      >
        <div >
          <q-table
            title="Treats"
            :data="data"
            :columns="columns"
            row-key="name"
            hide-bottom
          >
          </q-table>
        </div>
      </q-layout>
    </div>
    <script>
      const columns = [
        {
          name: "name",
          required: true,
          label: "Dessert",
          align: "left",
          field: (row) => row.name,
          format: (val) => `${val}`,
          sortable: true
        },
        {
          name: "calories",
          align: "center",
          label: "Calories",
          field: "calories",
          sortable: true
        },
        { name: "fat", label: "Fat (g)", field: "fat", sortable: true },
        {
          name: "calcium",
          label: "Calcium (%)",
          field: "calcium",
          sortable: true,
          sort: (a, b) => parseInt(a, 10) - parseInt(b, 10)
        }
      ];
      const data = [
        {
          name: "Frozen Yogurt",
          calories: 159,
          fat: 6.0,
          calcium: "14%"
        },
        {
          name: "Ice cream sandwich",
          calories: 237,
          fat: 9.0,
          calcium: "8%"
        },
        {
          name: "Eclair",
          calories: 262,
          fat: 16.0,
          calcium: "6%"
        },
        {
          name: "Honeycomb",
          calories: 408,
          fat: 3.2,
          calcium: "0%"
        },
        {
          name: "Donut",
          calories: 452,
          fat: 25.0,
          calcium: "2%"
        },
        {
          name: "KitKat",
          calories: 518,
          fat: 26.0,
          calcium: "12%"
        }
      ];
      new  Vue ({
        el: "#q-app",
        data: {
          columns,
          data,
          filter: ""
        }
      });
    </script>
  </body>
</html>

Sắp xếp tùy chỉnh

Chúng tôi có thể thêm sắp xếp tùy chỉnh bằng cách đặt phương pháp sắp xếp hỗ trợ cho phương pháp sắp xếp của riêng chúng tôi:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>
  <body >
    <script src="https://cdn.jsdelivr.net/npm/[email protected]^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.min.js"></script>
    <div >
      <q-layout
        view="lHh Lpr lFf"
        container
        style="height: 100vh;"
        
      >
        <div >
          <q-table
            title="Treats"
            :data="data"
            :columns="columns"
            row-key="name"
            :sort-method="customSort"
            binary-state-sort
          >
          </q-table>
        </div>
      </q-layout>
    </div>
    <script>
      const columns = [
        {
          name: "name",
          required: true,
          label: "Dessert",
          align: "left",
          field: (row) => row.name,
          format: (val) => `${val}`,
          sortable: true
        },
        {
          name: "calories",
          align: "center",
          label: "Calories",
          field: "calories",
          sortable: true
        },
        { name: "fat", label: "Fat (g)", field: "fat", sortable: true },
        {
          name: "calcium",
          label: "Calcium (%)",
          field: "calcium",
          sortable: true,
          sort: (a, b) => parseInt(a, 10) - parseInt(b, 10)
        }
      ];
      const data = [
        {
          name: "Frozen Yogurt",
          calories: 159,
          fat: 6.0,
          calcium: "14%"
        },
        {
          name: "Ice cream sandwich",
          calories: 237,
          fat: 9.0,
          calcium: "8%"
        },
        {
          name: "Eclair",
          calories: 262,
          fat: 16.0,
          calcium: "6%"
        },
        {
          name: "Honeycomb",
          calories: 408,
          fat: 3.2,
          calcium: "0%"
        },
        {
          name: "Donut",
          calories: 452,
          fat: 25.0,
          calcium: "2%"
        },
        {
          name: "KitKat",
          calories: 518,
          fat: 26.0,
          calcium: "12%"
        }
      ];
      new  Vue ({
        el: "#q-app",
        data: {
          columns,
          data
        },
        methods: {
          customSort(rows, sortBy, descending) {
            const data = [...rows];

            if (sortBy) {
              data.sort((a, b) => {
                const x = descending ? b : a;
                const y = descending ? a : b;

                if (sortBy === "name") {
                  return x[sortBy] > y[sortBy]
                    ? 1
                    : x[sortBy] < y[sortBy]
                    ? -1
                    : 0;
                } else {
                  return +x[sortBy] - +y[sortBy];
                }
              });
            }

            return data;
          }
        }
      });
    </script>
  </body>
</html>

Phương thức customSort nhận các hàng có tất cả dữ liệu bảng.

sortBy có trường mà chúng tôi sắp xếp theo.

Và giảm dần là một boolean cho biết chúng ta có sắp xếp theo thứ tự giảm dần hay không.

Sự kết luận

Trên đây là thông tin về Phát triển ứng dụng Vue với Thư viện chuẩn tinh – Bảng không hiển thị dữ liệu và sắp xếp tùy chỉnh. Hãy để upadvice.net biết trong các bình luận cái nào phù hợp với bạn. Tương tự như vậy, tất cả các thắc mắc của bạn đều được hoan nghênh trong phần bình luận bên dưới.