el-table设置固定宽度

el-table组件可以通过设置el-table-column的width属性来实现固定宽度。但是由于数据不确定，无法预设宽度。为了解决这个问题，可以使用自定义指令来动态适应内容的宽度。具体实现方法是注册一个自定义指令，并在el-table组件上使用该指令，代码如下：

// 在main.js中注册全局自定义指令
Vue.directive('fitColumns', {
  inserted: function(el) {
    const table = el.querySelector('.el-table')
    const columns = table.querySelectorAll('.el-table-column')
    columns.forEach(column => {
      column.style.width = 'auto' // 设置列宽为自动，适应内容宽度
    })
  }
})

// 在组件中使用自定义指令
<el-table v-fitColumns>
  <el-table-column label="name" prop="name"></el-table-column>
</el-table>

通过以上代码，el-table的列宽就可以动态适应内容宽度了。