vuetify 學習第一天之v-data-table_表格組件

v-data-table組件學習第一天

---

目錄

---

---

內容

---

  示例如下：

  使用前端框架vue，用vue-cli腳手架搭建的環境，版本爲當前最新版本。

組件	版本
vue-cli	v4.0.5
vue	v2.6.10
vuetify	v2.1.15

1、簡介

  v-data-table 組件用於顯示列表數據，特色有排序，搜索，分頁，單元格編輯，表頭和行選擇。

  由於現在表格數據大部分情況下都是來自於後端請求，這裏着重講解服務端數據渲染。純前端數據渲染，自行查閱官網，官網地址:https://vuetifyjs.com/en/components/data-tables

2、常用屬性

• 頁面源代碼:

<!-- brand component -->
<template>
  <div>
    <v-card>
      <v-card-title>
        <v-btn small raised color="primary">新增品牌</v-btn>
        <v-spacer></v-spacer>
        <v-text-field
          v-model="search"
          append-icon="search"
          label="Search"
          single-line
          hide-details
          @keyup.enter="searchChanged"
          @click:append="searchChanged"
        ></v-text-field>
      </v-card-title>
      <v-data-table
        :headers="headers"
        :items="brandList"
        :options.sync="options"
        :server-items-length="total"
        :loading="loading"
        class="elevation-1"
        @update:options="optionsChanged"
      >
        <template v-slot:item.logo="{ item }">
          <img :src="item.logo" width="100" />
        </template>
        <template v-slot:item.option="{ item }">
          <v-icon small class="mr-2" @click="editBrand(item)">edit</v-icon>
          <v-icon small @click="deleteBrand(item.id)">delete</v-icon>
        </template>
      </v-data-table>
    </v-card>
  </div>
</template>

<script>
export default {
  data: () => ({
    search: "",
    options: {
      page: 1,
      itemsPerPage: 10,
      pageStart: 1,
      pageStop: 1,
      sortBy: ["id", "logo"],
      sortDesc: [false, false]
    },
    total: 0,
    pageCount: 1,
    brandList: [],
    loading: false,
    headers: [
      { text: "ID", value: "id" },
      { text: "名稱", value: "name", sortable: false },
      { text: "Logo", value: "logo", sortable: false },
      { text: "首字母", value: "initial" },
      { text: "操作", value: "option", sortable: false }
    ]
  }),

  created() {
    this.getBrandList();
  },

  methods: {
    // 獲取分頁搜索品牌列表
    getBrandList() {
      this.axios
        .get("/item/brand/page", {
          params: {
            search: this.search,
            page: this.options.page,
            rows: this.options.itemsPerPage,
            sortBy: this.options.sortBy,
            sortDesc: this.options.sortDesc
          }
        })
        .then(resp => {
          // console.log(resp);
          if (resp.status != 200) {
            // 報錯提示
          }
          this.brandList = resp.data.items;
          this.total = resp.data.total;
          this.options.pageStop = resp.data.totalPage;
        });
    },
    // 編輯品牌
    editBrand(item) {
      console.log(item.id);
    },
    // 刪除指定品牌
    deleteBrand(itemId) {
      console.log(itemId);
    },
    searchChanged() {
      if (this.search !== "") {
        // console.log(this.search);
        this.getBrandList();
      }
    },
    // 分組、排序項改變，重新向後端請求數據
    optionsChanged() {
      // console.log(this.options);
      this.getBrandList();
    }
  },

  components: {}
};
</script>

<style lang='scss' scoped>
</style>

2.1、常用屬性

名稱	默認值	描述	詳解
headers	undefined	表頭信息	2.2.1
items	[]	表格要渲染的數據	2.2.2
options	{}	排序和分頁配置	2.2.3
server-items-length	-1	總記錄數	2.2.4
loading	false	數據加載條	2.2.5

2.2、詳細描述

2.2.1、headers詳解

• 示例：

通用配置：
headers:[
	{
	  text: string							// 列名稱
	  value: string							// 列綁定的變量
	  align?: 'start' | 'center' | 'end'   // 列單元格內容對齊方式,默認左對齊
	  sortable?: boolean					// 是否可以排序，默認true
	  filterable?: boolean					// 是否可過濾
	  divider?: boolean						// 是否分隔
	  class?: string | string[]				// 類名既樣式名
	  width?: string | number				// 列寬度
	  filter?: (value: any, search: string, item: any) => boolean 
	  sort?: (a: any, b: any) => number		
	}
	...
]

本例配置：
headers: [
      { text: "ID", value: "id" },
      { text: "名稱", value: "name", sortable: false },
      { text: "Logo", value: "logo", sortable: false },
      { text: "首字母", value: "initial" },
      { text: "操作", value: "option", sortable: false }
    ]

tips: value 取值儘量不要取’action’ ，如果取值爲’action‘，那麼該列渲染不出數據。原因暫時不清楚，猜測與vue或者vuetify衝突。如小夥伴們找到原因，請告知。

• 詳解

名稱	類型	默認值	描述
text	string	undefined	列名
value	string	undefined	列綁定的變量，數組數據根據該變量值渲染對應的列
sortable	boolean	true	指定的列是否可以排序，默認可以排序

2.2.2、items

• 示例：

本例數據：
[
        {
            "id": 1115,
            "name": "HTC",
            "logo": "",
            "initial": "H"
        },
        {
            "id": 1528,
            "name": "LG",
            "logo": "",
            "initial": "L"
        },
        {
            "id": 1912,
            "name": "NEC",
            "logo": "",
            "initial": "N"
        },
        {
            "id": 2032,
            "name": "OPPO",
            "logo": "http://img10.360buyimg.com/popshop/jfs/t2119/133/2264148064/4303/b8ab3755/56b2f385N8e4eb051.jpg",
            "initial": "O"
        },
        {
            "id": 2505,
            "name": "TCL",
            "logo": "",
            "initial": "T"
        },
        {
            "id": 3177,
            "name": "愛貝多",
            "logo": "",
            "initial": "A"
        },
        {
            "id": 3539,
            "name": "安橋（ONKYO）",
            "logo": "",
            "initial": "A"
        },
        {
            "id": 3941,
            "name": "白金（PLATINUM）",
            "logo": "",
            "initial": "B"
        },
        {
            "id": 4986,
            "name": "波導（BiRD）",
            "logo": "",
            "initial": "B"
        },
        {
            "id": 6522,
            "name": "朵唯（DOOV）",
            "logo": "",
            "initial": "D"
        }
    ]
	

tips: items屬性爲表格要渲染的數據，通常爲服務端返回數據，格式與表頭配置一一對應，
那麼數據會自動渲染到響應的列

2.2.3 、options

• 示例：

通用配置：
options: {
  page: number			// 當前頁碼，默認第一頁
  itemsPerPage: number	// 每頁顯示的條目數，默認10
  sortBy: string[]		// 指定那列排序
  sortDesc: boolean[]  // 對應的列排序是否降序,默認false
  groupBy: string[]   // 分組排序
  groupDesc: boolean[] // 是否降序,默認false
  multiSort: boolean  // 
  mustSort: boolean   // 是否必須排序,默認false
}

本例配置：
options: {
      page: 1,
      itemsPerPage: 10,
      sortBy: ["id", 'initial'],
      sortDesc: [false, false]
    }

• 詳解：

名稱	類型	默認值	描述
page	number	1	當前頁碼
itemsPerPage	number	10	每頁顯示多少行
sortBy	string[]或者string	[]	指定那些列用來排序，如果指定多個，從前向後一次執行
sortDesc	boolean[] 或者 boolean	[]	指定對應列是否降序排列

options中的每一項可以單獨作爲v-data-table屬性配置，不過通常一起配置，效率高

2.2.4、server-items-length

• 示例：

屬性：
<v-data-table
	:server-items-length="total"
	...
</v-data-table>

vue data
{
	toatal: -1 // 由對應方法賦值
	...
}

名稱	類型	默認值	描述
server-items-length	number	-1	數據總行數

tips:屬性***server-items-lenght***一旦定義，那麼v-data-table內置的排序和分頁不可用。需通過事件update:page、update:items-per-page 等來監聽改變，自定義實現。詳解2.2.6和2.2.7分析。

2.2.5 loading

• 示例:

屬性：
<v-data-table
	:loading="loading"
	...
>
</v-data-table>

vue data:
{
	loading: true
	...
}

• 詳解:

名稱	類型	默認值	描述
loading	boolean	false	當設置爲true 且沒有數據渲染的時候，表頭下面顯示加載條

3、插槽

• v-data-table 插槽一般用來定製某一列，比如修改刪除操作，根據路徑渲染成圖片等等

添加操作列示例：

本例操作列：
<template v-slot:item.option="{ item }">
          <v-icon small class="mr-2" @click="editBrand(item)">edit</v-icon>
          <v-icon small @click="deleteBrand(item.id)">delete</v-icon>
</template>

• 詳解

4、事件

• vue 事件不在詳述，可以查看vue事件相關文檔。

• v-data-table 事件有同等作用的屬性，在某些情況下，屬性不可用的時候，可以用該事件

• 常用對應關係：

  常用爲分頁和排序相關事件。原因前文提及，v-data-table屬性server-items-length設置的話，那麼內置排序，分頁功能不可用，既對應的屬性不起作用。那麼，就必須用相應的事件處理函數

事件	屬性	觸發時機
update:page	page.sync	當前頁碼改變觸發
update:items-per-page	items-per-page.sync	每頁顯示條目數改變觸發
update.sort-by	sort-by.sync	指定排序列改變觸發
update.sort-desc	sorc-desc.sync	指定降序改變觸發
update.options	options.sync	options 配置中數據改變觸發

• 示例

屬性：
<v-data-table
	@update:options="optionsChanged"
	...
>
</v-data-table>

vue methods:
{
	optionsChanged() {} //options項改變觸發函數，本例中觸發函數，爲向後端重新請求數據
	...
}

## 5、結語
+ vuetify官網地址：
<https://vuetifyjs.com>


***小結***：vuetify表格組件多嘗試之後，簡單易用，順便提示英語水平。

剛開始學習vuetify ui組件，如有錯誤之處歡迎指正，共同進步，本人QQ：806797785。