ElementUI 表格內容居中詳解

一、表格內容居中怎麼設置？

使用 ElementUI 中的表格組件，可以通過設置表格列的 align 屬性來控制表格內容的對齊方式。默認情況下，表格內容的對齊方式為左對齊。如果需要將表格內容居中，只需將列的 align 屬性設置為 center 即可。

  
    <el-table-column prop="name" label="姓名" align="center"></el-table-column>
  

在上面的代碼中，我們將「姓名」列的對齊方式設置為居中對齊。

二、ElementUI 表格內容過長，表格內容居中不了怎麼辦？

當表格內容過長時，為了保證表格的可讀性，表格的列寬往往會設置得比較寬。這時，如果直接設置表格內容的對齊方式為居中對齊，可能會導致表格內容被切斷，表格內容無法居中對齊。解決方案是設置表格列的 show-overflow-tooltip 屬性，讓表格內容在鼠標懸停時以 tooltip 的形式展示出來。

  
    <el-table-column prop="desc" label="描述" align="center" :show-overflow-tooltip="true"></el-table-column>
  

在上面的代碼中，我們將「描述」列的對齊方式設置為居中對齊，並且設置了 show-overflow-tooltip 屬性，當表格內容過長時，鼠標懸停在單元格上時會以 tooltip 的形式展示內容。

三、ElementUI 表格文字居中

與設置表格內容居中對齊類似，設置表格文字居中對齊也是通過設置列的 align 屬性實現的。不同的是，這裡需要設置表格列的 slot 屬性，並在 slot 內部定義要展示的文字，並將文字居中對齊。

  
    <el-table-column label="操作">
      <template slot-scope="scope">
        <div style="text-align:center">
          <i class="el-icon-edit"></i>
          <i class="el-icon-delete"></i>
        </div>
      </template>
    </el-table-column>
  

在上面的代碼中，我們將「操作」列的對齊方式設置為居中對齊。

四、ElementUI 表頭居中

除了控制表格內容的對齊方式，有時還需要控制表頭的對齊方式。這可以通過設置表頭單元格的 label-align 屬性來實現。

  
    <el-table-column prop="email" label="郵箱" label-align="center"></el-table-column>
  

在上面的代碼中，我們將 「郵箱」 表頭的對齊方式設置為居中對齊。

五、表格里的內容怎麼居中？

當表格中的元素包含多個子元素時，我們可以通過設置子元素的 text-align 屬性，來控制表格內容的對齊方式。

  
    <el-table-column label="詳細地址">
      <template slot-scope="scope">
        <div style="text-align:center">
          <span>{{ scope.row.province }}</span>
          <span>{{ scope.row.city }}</span>
          <span>{{ scope.row.address }}</span>
        </div>
      </template>
    </el-table-column>
  

在上面的代碼中，我們將表格中的 「詳細地址」 內容的對齊方式設置為居中對齊。

六、表格內容水平居中

有時候，我們需要讓表格中的內容在單元格內水平居中，可以在單元格中設置 align 和 justify 屬性來實現。

  
    <el-table-column label="昵稱">
      <template slot-scope="scope">
        <div style="display:flex;justify-content:center;align-items:center">
          <img :src="scope.row.avatar" alt="" style="width:40px;height:40px;border-radius:50%">
          <span style="margin-left:10px">{{ scope.row.name }}</span>
        </div>
      </template>
    </el-table-column>
  

在上面的代碼中，我們將表格中的 「昵稱」 內容的對齊方式設置為水平居中對齊。

七、怎麼讓表格內容居中？

前面已經介紹了多種方法來控制表格內容和表頭的對齊方式。在實際開發中，我們可以根據實際需要，選擇適用的方法來控制表格內容的對齊方式，以達到最優的視覺效果。

八、表格內容上下居中

表格內容上下居中，需要給每個單元格設置 line-height 屬性的值，並使其大於或等於單元格的高度即可。

  
    <el-table-column prop="intro" label="簡介">
      <template slot-scope="scope">
        <div style="line-height:50px">{{ scope.row.intro }}</div>
      </template>
    </el-table-column>
  

在上面的代碼中，我們將表格中的 「簡介」 內容的上下居中方式設置為使用了 line-height:50px，使其等於單元格的高度。

九、表格內容為什麼不能居中選取？

表格內容不能居中選取的原因，是因為居中對齊是通過對文本做一個統一的左偏移實現的，而選取文本時是根據原始的單個字符位置計算文字選取的範圍。因此，選取的範圍不會受到居中對齊方式的影響。如果需要選取並複製居中對齊的文本，需要手動將每個字符進行左右平移，重新排版。