vue.js Table 组件自定义列宽实现核心方法

首先讲解一下如何自定义vue.js Table组件的列宽。

1. 确定列宽方式

在开始自定义列宽之前，我们需要明确列宽的计算方式。vue.js Table组件提供了三种列宽计算方式：

• border（边界）：该方式是默认方式，单元格的宽度由单元格边框宽度和表格边框宽度共同决定。
• width（固定宽度）：该方式是将单元格宽度设置为一个固定的宽度。
• min-width（最小宽度）：该方式是将单元格宽度设置为一个最小的宽度，并根据表格宽度动态计算单元格宽度。

以上三种方式可在Table组件列属性中设置，如下代码所示：

<el-table-column prop="name" label="姓名" :width="120"></el-table-column>
<el-table-column prop="address" label="地址" :min-width="100"></el-table-column>
<el-table-column prop="age" label="年龄" ></el-table-column>

2. 自定义列渲染

如果要自定义列宽，必须先进行列渲染的自定义，因为列宽仅仅是单元格宽度的计算方式之一。下面是一个简单的自定义列渲染的示例：

<el-table-column prop="name" label="姓名">
  <!-- 使用slot-scope可以访问当前列的row和index
  v-bind绑定style样式实现自定义列宽 -->
  <template slot-scope="{row,index}">
    <span :style="{width: getWidth(index)+'px'}">{{ row.name }}</span>
  </template>
</el-table-column>

我们在上述模板中使用getWidth方法计算并返回合适的宽度值。接下来我们就来介绍getWidth方法的实现。

3. getWidth方法实现

为了实现自定义列宽，我们需要在组件中新增一个getWidth方法。该方法返回一个整数类型，代表单元格的宽度值。下面是一个简单的getWidth方法示例代码：

getWidth(index) {
  let width = 0;
  //通过获取表格元素的宽度和表头元素的宽度来计算每列的实际宽度
  const tableWidth = this.$refs.table.$el.offsetWidth;
  const headerCells = this.$refs.table.$el.querySelectorAll('.el-table__header-wrapper th');
  width = headerCells[index].offsetWidth / tableWidth * 100;
  return width;
}

该方法中，我们使用$refs获取当前Table组件，并通过querySelectorAll方法获取表头元素。然后根据表格元素宽度和每列表头元素宽度的比例计算出每列宽度百分比，最终返回宽度值。

4. 完整示例

下面是一个完整的vue.js Table组件自定义列宽实现示例。该示例中展示了如何利用CSS样式、计算表格宽度和列宽百分比，实现动态自适应的列宽计算方式。

<template>
  <el-table ref="table" :data="tableData">
    <el-table-column prop="name" label="姓名">
      <template slot-scope="{row,index}">
        <!-- 利用“弹性盒子”模型和CSS百分比，实现自适应的列宽计算方式 -->
        <span class="table-cell" :style="{flex: getWidth(index)}">{{ row.name }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="地址">
      <template slot-scope="{row,index}">
        <span class="table-cell" :style="{flex: getWidth(index)}">{{ row.address }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="age" label="年龄">
      <template slot-scope="{row,index}">
        <span class="table-cell" :style="{flex: getWidth(index)}">{{ row.age }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', address: '深圳市宝安区', age: 25 },
        { name: '李四', address: '广州市天河区', age: 30 },
        { name: '王五', address: '上海市浦东区', age: 40 },
        { name: '赵六', address: '北京市东城区', age: 50 }
      ]
    };
  },
  methods: {
    getWidth(index) {
      let width = 0;
      const tableWidth = this.$refs.table.$el.offsetWidth;
      const headerCells = this.$refs.table.$el.querySelectorAll('.el-table__header-wrapper th');
      width = headerCells[index].offsetWidth / tableWidth * 100;
      return width;
    }
  }
};
</script>

<style scoped>
.table-cell {
  display: flex;
  align-items: center;
  /* 每列的自适应宽度计算方式 */
  justify-content: flex-start;
  /* 计算方式百分比，总和为100 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

该示例中，我们利用CSS的flex和calc属性实现自适应的容器宽度和列宽比例计算，从而实现Table组件的动态自适应列宽。