vue el-table 表格列分割

vue的el-table组件提供了多种方式来对表格列进行分割。

首先，可以使用固定列来分割表格。在el-table组件的columns属性中，通过设置固定列的fixed属性为"left"或"right"，可以实现将该列固定在表格的左侧或右侧。例如：

<el-table :data="tableData">
  <el-table-column label="姓名" prop="name" fixed="left"></el-table-column>
  <el-table-column label="年龄" prop="age"></el-table-column>
  <!-- 其他列配置 -->
  <el-table-column label="地址" prop="address" fixed="right"></el-table-column>
</el-table>

其次，还可以通过自定义表头来实现列分割。在el-table组件的处理slot中，可以自定义表头内容，通过添加额外的元素或样式来实现列的分割效果。例如：

<el-table :data="tableData" style="border-collapse: separate; border-spacing: 10px;">
  <el-table-column label="姓名" prop="name">
    <template slot="header">
      <div style="border-bottom: 1px solid #999;">姓名</div>
    </template>
  </el-table-column>
  <el-table-column label="年龄" prop="age">
    <template slot="header">
      <div style="border-bottom: 1px solid #999;">年龄</div>
    </template>
  </el-table-column>
  <!-- 其他列配置 -->
</el-table>

除了以上两种方式，还可以通过使用CSS来实现列的分割。通过为el-table组件添加自定义的CSS类名，然后在样式中设置border、padding等属性，可以实现列之间的分割效果。例如：

<el-table :data="tableData" class="my-table">
  <el-table-column label="姓名" prop="name"></el-table-column>
  <el-table-column label="年龄" prop="age"></el-table-column>
  <!-- 其他列配置 -->
</el-table>

.my-table td {
  border-right: 1px dashed #999;
  padding-right: 10px;
}

总之，vue的el-table组件可以通过使用固定列、自定义表头或CSS样式来实现列的分割效果，开发者可以根据需求选择适合的方式。