vue3 el table 列宽自适应

针对Vue3中的el-table组件，可以通过设置表格列的min-width和width属性来实现列宽自适应。其中，min-width表示列的最小宽度，width表示列的宽度。可以根据实际情况设置这两个属性的值，以达到最佳的显示效果。

以下是一个示例代码，其中第一列的宽度为100px，第二列的宽度为自适应：

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="name" label="姓名" width="100"></el-table-column>
  <el-table-column prop="age" label="年龄" :min-width="100"></el-table-column>
</el-table>

需要注意的是，如果设置了列的宽度，那么当列内容过长时，会出现省略号。如果不想出现省略号，可以将列的overflow属性设置为visible，但这样会导致列宽自适应失效。

相关问题

table列最小宽度 vue_（几乎）完美实现 el-table 列宽自适应__Vue.js

你可以使用 `min-width` 属性来设置表格列的最小宽度。具体实现方法如下：

1. 在表格组件中设置 `cell-style` 属性，用于设置每个单元格的样式。

<el-table
  :data="tableData"
  :cell-style="cellStyle">
  <!-- 表格列定义 -->
</el-table>

2. 在 Vue 实例中定义 `cellStyle` 方法，用于根据列的内容设置单元格的样式。

export default {
  data() {
    return {
      tableData: [
        // 表格数据
      ]
    }
  },
  methods: {
    cellStyle({ column }) {
      // 根据列的内容动态计算最小宽度
      const minWidth = column.minWidth || 100 // 设置默认最小宽度为 100 像素
      return { minWidth: `${minWidth}px` }
    }
  }
}

3. 在表格列定义中设置 `minWidth` 属性，用于设置每个列的最小宽度。

<el-table-column
  prop="name"
  label="姓名"
  :min-width="80">
</el-table-column>

这样就可以实现表格列的最小宽度自适应。注意，如果一个列的内容太长，超过了最小宽度，那么单元格的宽度会自动扩展以适应内容。

vue el-table自适应屏幕

以下是VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法：

<template>
  <div class="table-container">
    <el-table
      :data="tableData"
      style="width: 100%"
      :row-style="{height: '50px'}"
      :header-row-style="{height: '50px'}"
      :fit="false"
      :height="tableHeight"
      ref="table"
    >
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址" width="180"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2021-01-01',
          name: '张三',
          address: '北京市朝阳区'
        },
        {
          date: '2021-01-02',
          name: '李四',
          address: '上海市浦东新区'
        },
        {
          date: '2021-01-03',
          name: '王五',
          address: '广州市天河区'
        }
      ],
      tableHeight: 0
    }
  },
  mounted() {
    this.getTableHeight()
    window.addEventListener('resize', this.getTableHeight)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.getTableHeight)
  },
  methods: {
    getTableHeight() {
      const tableHeight = document.documentElement.clientHeight - this.$refs.table.$el.offsetTop - 50
      this.tableHeight = tableHeight
    }
  }
}
</script>

<style>
.table-container {
  height: 100%;
  overflow: auto;
}
</style>

在这个例子中，我们使用了ElementUI的el-table组件，并且设置了表格的高度为tableHeight。在mounted钩子函数中，我们调用了getTableHeight方法来获取表格的高度。在getTableHeight方法中，我们使用了document.documentElement.clientHeight来获取浏览器窗口的高度，然后减去表格距离浏览器窗口顶部的距离和表头的高度，得到表格的高度。最后，我们将计算出来的表格高度赋值给tableHeight即可。