在用 el-table 组件的时候遇到了一个小问题：项目中很多地方都会用到表格，业务不同时列不同，每次引入组件后都要重新设置表头，很麻烦，如果表格的列能动态生成就省事多了

 核心代码：

<!-- 表格 -->
<el-table
  :data="rowData"
  ref="table"
  size="small"
  style="width: 100%"
  row-key="id"
  :row-style="{ height: '45px' }"
>
  <!-- 动态列 -->
  <!-- 列名由columnData数组传进来，遍历数组绑定label、prop，:key是v-for要求的，不写可能会报错 -->
  <el-table-column
    v-for="(item, index) in columnData"
    :key="index"
    :prop="item.name"
    :label="item.label"
    align="center"
    min-width="250px"
  >
  </el-table-column>
  <!-- 固定列：根据需要添加 -->
  <el-table-column label="操作" align="center" min-width="250px">
    <template slot-scope="scope">
      <el-button
        size="small"
        class="table_btn1"
        icon="el-icon-edit"
        @click="edit(scope.row)"
        >查看详情
      </el-button>
    </template>
  </el-table-column>
</el-table>

现在表格有了，接下来就差传入表格的表头、要展示的数据了：

data() {
  return {
    // 表头
    columnData: [
      {
        name: "nam",
        label: "姓名",
      },
      {
        name: "sex",
        label: "性别",
      },
    ],
    // 表格数据
    rowData: [
      {
        nam: "张三",
        sex: "男",
      },
      {
        nam: "李四",
        sex: "女",
      },
    ],


    // 总页数
    total: 0,
    // 页大小
    size: 10,
    // 当前页
    currentPage: 1,
  };
},

至于数据是通过跳转页面传来的还是通过请求接口获取的就要根据实际情况定了

我尝试了一下做成父子组件的形式，将表格这块儿做成子组件，通过父子组建传参的形式将表头、表数据传进来，这样这个表格的复用性就提高了，但是没有成功，未找到原因，知道的伙伴评论区留言