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: "+86 13888888888"
        },
        {
          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: "+86 13888888888"
        },
        {
          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: "+86 13888888888"
        },
        {
          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: "+86 13888888888"
        }
      ],
    };
  }
};
</script>

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


//注：此css样式是非常重要的额

好了，到此已经结束了，基本效果已经实现。

特别注释一点：

柚子写的时候也是很难受，因为不知道为什么，写死的数据就可以实现效果，而一旦是从接口获取数据就会失去效果，挤到一块去，后来才发现，一定是要有值得时候再显示表格，获取接口是需要一个时间的，所以如果我们的数据是从接口获取的，那么就先将tableData值置为空，然后再用v-if来控制当tableData的值不为空时显示表格这样就没什么问题了，当然如果改变tableData的值得时候也是要记得先将tableData置为空就好了。

ok，有什么问题可以下方留言讨论，或私信。希望能对你有帮助。