el-table变换列序并绑定用户

el-table是一个基于Element UI的表格组件，可以用于展示数据并进行排序、筛选等操作。如果要进行列序的变换并绑定用户，可以通过以下几步来实现。

首先，使用el-table组件创建一个表格，并绑定需要展示的数据源，例如一个数组data。

<el-table :data="data">
  <!-- 列定义 -->
</el-table>

接着，定义需要展示的列，可以使用el-table-column组件，通过指定prop属性来绑定数据源中对应的字段。

<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="gender" label="性别"></el-table-column>
<!-- 其他列定义 -->

以上例子中，prop属性分别对应data中的name、age、gender字段。根据实际情况定义需要展示的列。

然后，为了实现列序的变换功能，可以使用el-table的:order-prop属性，绑定一个数组orderProps，该数组指定了列的显示顺序。

<el-table :data="data" :order-prop="orderProps">
  <!-- 列定义 -->
</el-table>

在Vue的data中定义orderProps数组，并通过计算属性来根据用户的操作实时更新数组的值。

data() {
  return {
    data: [],
    orderProps: ['name', 'age', 'gender']
  }
},
computed: {
  orderProps() {
    // 根据用户的操作来更新orderProps的值
    return this.orderProps;
  }
}

通过计算属性来绑定orderProps数组，当用户进行列序的变换时，更新orderProps数组的值，el-table会根据该数组的顺序来展示列。

最后，为了绑定用户，可以在orderProps数组中添加一个特殊的字段，例如userID。在列定义中添加一个slot，通过插槽的方式自定义该列的内容。

<el-table-column label="操作">
  <template slot-scope="scope">
    <el-button @click="handleClick(scope.row)">删除</el-button>
  </template>
</el-table-column>

以上例子中，通过slot-scope="scope"来获取行数据，可以通过scope.row获取到每一行的数据。在handleClick方法中可以获取到对应的userID，然后根据业务需求进行相应的操作。

通过以上的步骤，就可以实现el-table的列序变换并绑定用户的功能。