Ant-Design-Vue中關於Table組件的使用

1. 如何自定義表格列頭：

<a-table
        :columns="columns"
        :dataSource="dataSource">
        <span slot="customTitle"><a-icon type="smile-o"/>Name</span>
</a-table>

const columns = [　　
    {　
      dataIndex: 'name',　　　　// 自定義列表頭，則不能設置title屬性
      align: 'left',
      slots: { title: 'customTitle'}　　// 在這里定義一個slots屬性，並設置一個title屬性
    }
]

頁面將會渲染為如下：

 

 

2.如何設置自定義單行樣式

<a-table
        :columns="columns"
        :dataSource="dataSource">
        <span slot="action" slot-scope="record, index">　// 這里傳入的值分別是：record：當前行的原始數據，index：當前行的索引
          <a @click="handleEdit(record.key)">編輯</a>
        </span>
</a-table>

 

const columns = [
    {
      title: '菜單名稱'
      dataIndex: 'name',　　// dataIndex的值對應的是，列數據在數據項中對應的 key
      key: 'name',　　　　　// 如果dataIndex屬性值唯一，則可以不設置key屬性
      align: 'left',
    },
    {
      title: '操作',
　　　 key: 'action'
      dataIndex: 'action',
      width: '30%',
      scopedSlots: { customRender: 'action' },    //這一行自定義渲染這一列
      align: 'center'
    }
 ]  

頁面展示如下：

 3.如何設置表頭，頁腳和邊框線？

<template>
  <a-table :columns="columns" :dataSource="data" bordered>　　// 這里添加bordered屬性，就可以添加上邊框線
    <template slot="name" slot-scope="text">
      <a href="javascript:;">{{text}}</a>
    </template>
    <template slot="title" slot-scope="currentPageData">　　// slot="title"就可以設置頁頭了，'title'改為其他值則沒有頁頭
      Header--{{currentPageData}}　　　　// 這里打印一下currentData，看下是啥值
    </template> 
    <template slot="footer"> Footer </template>　　// 跟上同理
 </a-table> 
</template>

const columns = [　　// columns中並沒有定義頁頭和頁腳的相關代碼
    {
      title: 'Name',
      dataIndex: 'name',
      scopedSlots: { customRender: 'name' },
    },
    {
      title: 'Cash Assets',
      className: 'column-money',
      dataIndex: 'money',
    },
    {
      title: 'Address',
      dataIndex: 'address',
    },
  ];

頁面顯示就結果如下：

 4.表格如何樹形展示數據：

<a-table
    :columns="columns"
    :dataSource="dataSource"
    childrenColumnName="qq"　　// 這里可以選擇子節點的屬性名，一般都為'children',這里我設置為'qq',試下效果
    :rowSelection="rowSelection">　　// rowSelection是列表可選擇的時候的配置項，后面介紹，帶有此選項表格前就會出現可選擇的checkbox
    <span slot="customTitle"><a-icon type="smile-o" /> Name</span>
    <span slot="action" slot-scope="text, record, index">
       <a @click="handleEdit(record.key)">編輯</a>
    </span>
</a-table>

const columns = [
    {
      dataIndex: 'name',
      key: 'name',
      align: 'left',
      slots: { title: 'customTitle'}
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: '30%',
      scopedSlots: { customRender: 'action' },
      align: 'center'
    }
  ]
  const dataSource = [
    {
      key: 1,
      name: 'John Brown sr.',
      age: 60,
      address: 'New York No. 1 Lake Park',
      qq: [　　　　　　　　　　　　//這里我把子節點的key，改為qq了
        {
          key: 11,
          name: 'John Brown',
          age: 42,
          address: 'New York No. 2 Lake Park'
        }
      ]
    },
    {
      key: 2,
      name: 'Joe Black',
      age: 32,
      address: 'Sidney No. 1 Lake Park'
    }
  ]

 

頁面顯示效果如下：（顯示正確）

 5.自定義篩選菜單：（下面的代碼都太多了，有必要在點開看吧，有詳細的注釋）

<template>
  <a-table :dataSource="data" :columns="columns">
    <!--下面這整個div都是設置每一列搜索的樣式圖標-->
    <div
      slot="filterDropdown"
      slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
      style="padding: 8px"
    >
      <!-- 這里的slot是filter的插槽,column是當前列的配置,slot-scope直接照抄即可 -->
      <a-input
        v-ant-ref="c => searchInput = c"
        :placeholder="`Search ${column.dataIndex}`"
        :value="selectedKeys[0]"
        @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
        @pressEnter="() => handleSearch(selectedKeys, confirm)"
        style="width: 188px; margin-bottom: 8px; display: block;"
      />
      <!-- v-ant-ref是固定寫法，將表單輸入的值傳遞給searchInput,selectedKeys是數組，value每次綁定的都是他的第一個值 -->
      <!--@change和@pressEnter是Input組件的自帶方法，請查看Input組件內容-->
      <!--@change方法是實時改變要查詢的selectedKeys的值，@pressEnter是按下enter直接查詢的方法-->
      <a-button
        type="primary"
        @click="() => handleSearch(selectedKeys, confirm)"
        icon="search"
        size="small"
        style="width: 90px; margin-right: 8px"
      >Search
      </a-button>
      <a-button @click="() => handleReset(clearFilters)" size="small" style="width: 90px"
      >Reset
      </a-button>
    </div>
<!--這里專門配置搜索按鈕的樣式，可以修改type的值為你想要的圖標，也可以修改style，改變搜索前和搜索后的圖標樣式-->
    <a-icon
      slot="filterIcon"
      slot-scope="filtered"
      type="search"
      :style="{ color: filtered ? 'red' : undefined }"
    />
    <!--修改匹配到的數據樣式-->
    <template slot="customRender" slot-scope="text">
      <span v-if="searchText">
        <template
          v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))"
        >
          <mark
            v-if="fragment.toLowerCase() === searchText.toLowerCase()"
            :key="i"
            class="highlight"
          >{{fragment}}</mark>
          <template v-else>{{fragment}}</template>
        </template>
      </span>
      <template v-else>{{text}}</template>
    </template>
  </a-table>
</template>

<script>
  const data = []

  export default {
    data () {
      return {
        data,
        searchText: '',
        searchInput: null,
        columns: [
          {
            title: 'Name',
            dataIndex: 'name',
            key: 'name',
            // 這里的三個插槽，分別是搜索按鈕插槽，定義搜索按鈕樣式插槽，和搜索之后的數據插槽
            scopedSlots: {
              filterDropdown: 'filterDropdown',
              filterIcon: 'filterIcon',
              customRender: 'customRender'
            },
            //這里才是確定篩選的運行函數
            onFilter: (value, record) => record.name.toString().toLowerCase().includes(value.toLowerCase()),
            //自定義篩選菜單可見變化時調用
            onFilterDropdownVisibleChange: visible => {
              if (visible) {
                setTimeout(() => {
                  this.searchInput.focus()
                }, 0)
              }
            }
          },{......}//省略了部分配置
　　　　　]
      }
    },
    methods: {
      handleSearch (selectedKeys, confirm) {
        confirm();  // confirm會關閉搜索框
        console.log(selectedKeys) // 會打印出你在搜索框中輸入的值
        this.searchText = selectedKeys[0]
      },

      handleReset (clearFilters) {
        clearFilters();  // => 這里面也有調用confirm方法關閉對話框  
        this.searchText = ''
      }
    }
  }
</script>

 

6.如何自定義可以編輯單行的表格？

<template>
  <a-table :columns="columns" :dataSource="data" bordered>
    <!--用v-for遍歷模板，直接渲染三個插槽-->
    <template
      v-for="col in ['name', 'age', 'address']"
      :slot="col"
      slot-scope="text, record, index"
    >
      <div :key="col">
        <!--如果record.editable為true，則展示input框，可以修改數據，為false則直接展示數據-->
        <a-input
          v-if="record.editable"
          style="margin: -5px 0"
          :value="text"
          @change="e => handleChange(e.target.value, record.key, col)"
        />
        <template v-else>{{text}}</template>
      </div>
    </template>
    <!--操作欄插槽-->
    <template slot="operation" slot-scope="text, record, index">
      <div class="editable-row-operations">
        <!--如果當前行的editable為true說明正在操作中，顯示save和cancel按鈕，否則顯示edit按鈕-->
        <span v-if="record.editable">
          <a @click="() => save(record.key)">Save</a>
          <a-popconfirm title="Sure to cancel?" @confirm="() => cancel(record.key)">
            <a>Cancel</a>
          </a-popconfirm>
        </span>
        <span v-else>
          <a @click="() => edit(record.key)">Edit</a>
        </span>
      </div>
    </template>
  </a-table>
</template>
<script>
  const columns = [
    {title: 'name',dataIndex: 'name',width: '25%',scopedSlots: { customRender: 'name' }},
    {title: 'age',dataIndex: 'age',width: '15%',scopedSlots: { customRender: 'age' }},
    {title: 'address',dataIndex: 'address',width: '40%',scopedSlots: { customRender: 'address' }},
    {title: 'operation',dataIndex: 'operation',scopedSlots: { customRender: 'operation' }}
  ];

  const data = [];
  for (let i = 0; i < 100; i++) {
    data.push({
      key: i.toString(),
      name: `Edrward ${i}`,
      age: 32,
      address: `London Park no. ${i}`,
    });
  }
  export default {
    data() {
      this.cacheData = data.map(item => ({ ...item })); //緩存所有數據
      return {
        data,
        columns,
      };
    },
    methods: {
      /**
       * input的change的回調方法
       * @param value input框中你輸入的值
       * @param key   當前行對應的key值
       * @param column  當前列的dataIndex對應的名稱，有['name','age','address']
       */
      handleChange(value, key, column) {
        const newData = [...this.data];
        const target = newData.filter(item => key === item.key)[0];
        console.log(column);
        if (target) {
          target[column] = value;
          this.data = newData;
        }
      },
      /**
       * 點擊操作欄中修改的回調方法
       * @param key 當前行對應的key值
       */
      edit(key) {
        const newData = [...this.data];// 直接獲取了所有數據
        const target = newData.filter(item => key === item.key)[0];   // 在篩選出key值相同的那一條數據
        if (target) { // 如果數據存在，則給這條數據新增一個屬性為editable屬性為true => 代表為正在更改中
          target.editable = true;
          this.data = newData;
        }
      },
      /**
       * 修改完成之后點擊保存的回調方法
       * @param key 當前行對應的key值
       */
      save(key) {
        const newData = [...this.data];
        const newCacheData = [...this.cacheData];
        const target = newData.filter(item => key === item.key)[0];
        const targetCache = newCacheData.filter(item => key === item.key)[0];
        if (target && targetCache) {
          delete target.editable; // 刪除editable屬性
          this.data = newData;
          Object.assign(
            targetCache,
            target
          );
          this.cacheData = newCacheData;
        }
      },
      /**
       * 點擊取消編輯的回調方法
       * @param key 當前行對應的key值
       */
      cancel(key) {
        const newData = [...this.data];
        const target = newData.filter(item => key === item.key)[0];
        if (target) { // 將緩存的值重新復制給原先的數據，並刪除editable屬性
          Object.assign(target, this.cacheData.filter(item => key === item.key)[0]);
          delete target.editable;
          this.data = newData;
        }
      },
    },
  };
</script>
<style scoped>
  .editable-row-operations a {
    margin-right: 8px;
  }
</style>

 

7.如何定義可展開的table？

<template>
  <a-table :columns="columns" :dataSource="data">
    <a slot="action" slot-scope="text" href="javascript:;">Delete</a>
<!--    <p slot="expandedRowRender" slot-scope="record" style="margin: 0">{{record.description}}</p>-->
    <p slot="expandedRowRender" slot-scope="record,index" style="margin: 0">{{index}}</p>
    <p slot="expandedRowRender" slot-scope="record, index, indent, expanded">{{record}}--{{index}}--{{indent}}--{{expanded}}</p>
    <!--slot="expandedRowRender" 為Table的官方api，可傳入的值如上所示，只可展開一行，如果像上面這樣寫了三行，則只展示最下面一行 -->
  </a-table>
</template>
<script>
  const columns = [
    { title: 'Name', dataIndex: 'name', key: 'name' },
    { title: 'Age', dataIndex: 'age', key: 'age' },
    { title: 'Address', dataIndex: 'address', key: 'address' },
    { title: 'Action', dataIndex: '', key: 'x', scopedSlots: { customRender: 'action' } },
  ];

  const data = [
    {
      key: 1,
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
      description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',
    }
  ];

  export default {
    data() {
      return {data,columns,};
    },
  };
</script>

 

8.最后來一個帶分頁的表格

<template>
  <a-table :rowSelection="rowSelection" :columns="columns" :dataSource="data" :pagination="ipagination"/>
</template>

  const columns = [
    {itle: 'Name',dataIndex: 'name'},
    {title: 'Age',dataIndex: 'age'},
    {title: 'Address',dataIndex: 'address'}
  ]

  const data = []
  for (let i = 0; i < 46; i++) {
    data.push({
      key: i,
      name: `Edward King ${i}`,
      age: 32,
      address: `London, Park Lane no. ${i}`
    })
  }

  export default {
    data () {
      return {
        data,
        columns
        ipagination: {
          current: 1,
          pageSize: 10,
          total: data.length,
          showSizeChanger: true,
          showQuickJumper: true,
          pageSizeOptions: ['10','20','30'],  //這里注意只能是字符串，不能是數字
          showTotal: (total, range) => `顯示${range[0]}-${range[1]}條，共有 ${total}條`
        }
      }
    }
  }

　

 9.建議看官方組件案列中的，自定義選擇項案例，看完弄懂，表格的基本使用沒有問題了。大家使用的時候遇到了什么問題可以來溝通一下啊。。。