vue + element-ui 使用ex-table-column插件實作el-table的内容自動撐開表格且不換行的功能

要有遙不可及的夢想，也要有腳踏實地的本事。----------- Grapefruit.Banuit Gang(香柚幫)

首先安裝element-ui并實作引入，這個相信大家都會，柚子就不啰嗦了。

下面開始

第一步：安裝ex-table-column插件

               npm install ex-table-column --save  // 有條件可以使用cnpm進行安裝

第二步：main.js配置

              import ExTableColumn from './components/exTableColumn.js';

              Vue.component(ExTableColumn.name, ExTableColumn);

               運作不報錯即可

第三步：頁面寫入

<template>
  <el-table :data="tableData" style="width:500px;" border ref="multipleTable">
    <ex-table-column :autoFit="true" type="selection" fixed></ex-table-column>
    <ex-table-column :autoFit="true" prop="name" label="名稱"></ex-table-column>
    <ex-table-column :autoFit="true" prop="phoneNumber" label="手機号碼"></ex-table-column>
    <ex-table-column :autoFit="true" prop="address" label="位址"></ex-table-column>
    <ex-table-column :autoFit="true" prop="address2" label="位址2"></ex-table-column>
    <ex-table-column :autoFit="true" prop="date" label="時間"></ex-table-column>
  </el-table>
</template>
           

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-03",
          name: "Tom",
          address:
            "No. 189, Grove St, Los Angeles, No. 189, Grove St, Los Angeles",
          address2:
            "No. 189, Grove St, Los Angeles, No. 189, Grove St, Los Angeles",
          phoneNumber: "[phone]"
        },
        {
          date: "2016-05-02",
          name: "Tom",
          address:
            "No. 189, Grove St, Los Angeles, No. 189, Grove St, Los Angeles",
          address2:
            "No. 189, Grove St, Los Angeles, No. 189, Grove St, Los Angeles",
          phoneNumber: "[phone]"
        },
        {
          date: "2016-05-04",
          name: "Tom",
          address:
            "No. 189, Grove St, Los Angeles, No. 189, Grove St, Los Angeles",
          address2:
            "No. 189, Grove St, Los Angeles, No. 189, Grove St, Los Angeles",
          phoneNumber: "[phone]"
        },
        {
          date: "2016-05-01",
          name: "Tom",
          address:
            "No. 189, Grove St, Los Angeles, No. 189, Grove St, Los Angeles",
          address2:
            "No. 189, Grove St, Los Angeles, No. 189, Grove St, Los Angeles",
          phoneNumber: "[phone]"
        }
      ],
    };
  }
};
</script>
           

<style>
.el-table .cell {
  white-space: nowrap;
  width: fit-content;
}
</style>


//注：此css樣式是非常重要的額
           

好了，到此已經結束了，基本效果已經實作。

特别注釋一點：

柚子寫的時候也是很難受，因為不知道為什麼，寫死的資料就可以實作效果，而一旦是從接口擷取資料就會失去效果，擠到一塊去，後來才發現，一定是要有值得時候再顯示表格，擷取接口是需要一個時間的，是以如果我們的資料是從接口擷取的，那麼就先将tableData值置為空，然後再用v-if來控制當tableData的值不為空時顯示表格這樣就沒什麼問題了，當然如果改變tableData的值得時候也是要記得先将tableData置為空就好了。

ok，有什麼問題可以下方留言讨論，或私信。希望能對你有幫助。