ElementUI中el-table表格操作列宽度自适应以及封装成全局变量

在ElementUI中，可以通过设置el-table-column的min-width属性来实现操作列宽度的自适应。同时，可以通过全局变量的方式来封装表格的操作列模板。

以下是一个简单的示例，展示如何设置操作列的宽度以及封装全局变量：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <!-- 封装的全局操作列变量 -->
    <global-operations-column></global-operations-column>
  </el-table>
</template>
 
<script>
// 引入ElementUI的Table和TableColumn组件
import { Table, TableColumn } from 'element-ui';
import Vue from 'vue';
 
// 定义全局操作列组件
const GlobalOperationsColumn = {
  props: ['row'],
  template: `
    <el-table-column label="操作" min-width="150">
      <template slot-scope="scope">
        <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
        <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  `,
  methods: {
    handleEdit(row) {
      console.log('编辑', row);
    },
    handleDelete(row) {
      console.log('删除', row);
    },
  },
};
 
// 全局注册组件
Vue.component('global-operations-column', GlobalOperationsColumn);
 
export default {
  components: {
    'el-table': Table,
    'el-table-column': TableColumn,
    'global-operations-column': GlobalOperationsColumn,
  },
  data() {
    return {
      tableData: [{ date: '2016-05-02', name: '王小虎', ... }],
    };
  },
};
</script>

在这个示例中，我们定义了一个全局操作列组件GlobalOperationsColumn，它有编辑和删除两个按钮。通过min-width属性设置操作列的最小宽度，保证按钮可以在小宽度下正常显示。然后，我们全局注册了这个组件，在表格中通过<global-operations-column></global-operations-column>标签引用它。这样，我们就可以在多个表格中复用这个操作列，并且可以方便地进行全局样式和逻辑的修改。