vue中使用elementui 实现拖拽列改变列顺序的代码

### 回答1：
可以通过使用Element UI提供的<el-table>组件的sortable属性来实现拖拽列改变列顺序的功能。具体实现方式如下：

1.在模板中添加<el-table>组件，并设置columns属性、data属性和sortable属性：

<el-table :data="tableData" :columns="tableColumns" :sortable="true">
</el-table>

2.在Vue实例中定义tableColumns和tableData属性，用于控制表格的列和数据：

data() {
  return {
    tableColumns: [
      { prop: 'name', label: '姓名' },
      { prop: 'age', label: '年龄' },
      { prop: 'gender', label: '性别' }
    ],
    tableData: [
      { name: '张三', age: 18, gender: '男' },
      { name: '李四', age: 20, gender: '女' },
      { name: '王五', age: 22, gender: '男' }
    ]
  };
}

3.通过在tableColumns中定义sortable属性，来控制每一列是否可以被拖拽改变顺序：

data() {
  return {
    tableColumns: [
      { prop: 'name', label: '姓名', sortable: true },
      { prop: 'age', label: '年龄', sortable: true },
      { prop: 'gender', label: '性别', sortable: true }
    ],
    tableData: [
      { name: '张三', age: 18, gender: '男' },
      { name: '李四', age: 20, gender: '女' },
      { name: '王五', age: 22, gender: '男' }
    ]
  };
}

这样，用户就可以通过拖拽列的头部来改变列的顺序了。

### 回答2：
在Vue中使用Element UI实现拖拽列改变列顺序的代码主要是通过Element UI的Table组件和拖拽模块来实现。

首先，需要在Vue组件中引入Table组件和拖拽模块：

import { Table, TableColumn } from 'element-ui';
import 'element-ui/lib/theme-chalk/table.css';
import 'element-ui/lib/theme-chalk/table-column.css';
import 'element-ui/lib/theme-chalk/draggable.css';

然后，在Vue组件的template中使用Table和TableColumn组件来渲染表格和表头：

<template>
  <div>
    <el-table
      :data="tableData"
      :row-key="row => row.id"
      :header-cell-class-name="headerCellClass"
      @sort-change="handleSortChange"
      class="drag-table"
    >
      <el-table-column
        type="index"
        width="50"
        align="center"
      ></el-table-column>
      <el-table-column
        v-for="(item, index) in tableColumns"
        :key="item.prop"
        :label="item.label"
        :prop="item.prop"
        :sortable="sortable"
        :show-overflow-tooltip="true"
      ></el-table-column>
    </el-table>
  </div>
</template>

在Vue组件的script中，定义组件的data和methods：

<script>
export default {
  data() {
    return {
      tableData: [
        // 表格数据
      ],
      tableColumns: [
        // 表头数据
      ],
      sortable: true  // 是否可排序
    };
  },
  methods: {
    headerCellClass({ column, columnIndex }) {
      // 拖拽样式
      return 'drag-header-cell';
    },
    handleSortChange({ column, prop, order }) {
      // 表头排序事件处理
      // ...
    }
  }
};
</script>

最后，在Vue组件的style中添加样式：

<style scoped>
.drag-table .el-table__column {
  cursor: move;
}

.drag-header-cell {
  cursor: move;
}

.drag-header-cell.is-dragging {
  background-color: #f5f7fa;
}
</style>

通过以上代码，就可以实现在Vue中使用Element UI实现拖拽列改变列顺序的效果。需要注意的是，如果需要实现拖拽功能，还需要引入拖拽依赖包。

### 回答3：
在Vue中使用Element UI实现拖拽列改变列顺序的代码可以通过以下步骤实现：

1. 安装Element UI和Vue：
首先需要安装Element UI和Vue，可以使用npm或者yarn进行安装。

2. 导入Element UI所需的组件：
在Vue的代码中，需要导入`el-table`和`el-table-column`组件。可以使用以下语句进行导入：

import { Table, TableColumn } from 'element-ui'

3. 注册Element UI组件：
在Vue组件中，需要将导入的组件注册为全局或局部组件。可以使用以下代码进行注册：

components: {
  'el-table': Table,
  'el-table-column': TableColumn
}

4. 使用`el-table`组件构建表格：
在Vue的模板中，使用`el-table`组件来构建表格，例如：

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

5. 添加拖拽功能：
Element UI提供了`sortable`属性来实现拖拽列改变列顺序的功能。可以在模板中的`el-table-column`组件中添加`sortable`属性：

<el-table-column prop="name" label="姓名" sortable></el-table-column>

6. 完整代码示例：
以下是一个完整的使用Element UI实现拖拽列改变列顺序的Vue组件代码示例：

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="姓名" sortable></el-table-column>
    <el-table-column prop="age" label="年龄" sortable></el-table-column>
    <el-table-column prop="address" label="地址" sortable></el-table-column>
  </el-table>
</template>

<script>
import { Table, TableColumn } from 'element-ui'

export default {
  components: {
    'el-table': Table,
    'el-table-column': TableColumn
  },
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, address: '北京' },
        { name: '李四', age: 20, address: '上海' },
        { name: '王五', age: 25, address: '广州' }
      ]
    }
  }
}
</script>

通过以上步骤，我们就可以在Vue中使用Element UI实现拖拽列改变列顺序的功能了。