表格内某一个中有n条平均填充，上面是岗位，下面是姓名，然后每一条可以在表格内进行拖拽，也可以和表格外的小卡片进行拖拽，拖拽后的样式要和拖拽后位置的样式保持一致（表格内或者卡片的样式），vue2中如何实

在 Vue 2 中实现这种动态拖拽功能，可以结合使用 Element UI 的表格组件和 Draggable 插件，以及Vue 的计算属性和事件监听机制。以下是一个简化的步骤说明：

1. **安装依赖**:
- 安装 `element-ui` 和 `vuedraggable` 或者 `draggablejs` 这样的库来提供表格和拖拽功能。

npm install element-ui vuedraggable
# 或者
npm install draggablejs

2. **引入组件和配置**:
在入口文件中引入并注册这两个库。

import { ElTable, Draggable } from 'element-ui';
// 或者
import draggable from 'draggablejs';

Vue.component('draggable-item', Draggable);

3. **创建数据模型**:
设计一个包含岗位、姓名等字段的对象数组，并设置每个元素的默认拖拽属性。

data() {
  return {
    jobPositions: [
      { name: '职位1', isDraggable: true },
      //...
    ],
    externalCards: [],
    //...其他状态变量
  };
},

4. **绑定表格和卡片**:
使用 `draggable-item` 组件来包装表格的数据项，添加拖拽行为。

<el-table :data="jobPositions" @drag-end="handleDragEnd">
  <template slot-scope="scope">
    <draggable-item :key="scope.$index"
                   :draggable="scope.isDraggable"
                   :move="handleMove"
                   :options="{ group: 'jobPositions' }"
                   v-model="externalCards">
      {{ scope.row.name }}
    </draggable-item>
  </template>
</el-table>

<!-- 如果有外部卡片区域 -->
<div ref="externalCardsArea">
  <!-- ...此处添加动态加载卡片... -->
</div>

5. **处理拖放事件**:
- `handleDragEnd`: 当拖动结束时更新数据结构和视图。
- `handleMove`: 在拖拽过程中，跟踪移动的目标，更新目标的位置和源位置。

methods: {
  handleDragEnd(e) {
    const sourceIndex = e.sourceIndex;
    const targetIndex = e.targetIndex;

    // 更新 jobPositions 和 externalCards 数组
    this.jobPositions.splice(sourceIndex, 1, this.jobPositions.splice(targetIndex, 1)[0]);
  },
  handleMove({ originalIndex, targetIndex }) {
    // 根据需要调整拖拽后位置的样式
    this.$refs.externalCardsArea.style[targetIndex] = '/* 新的样式 */';
  }
}

6. **样式管理**:
根据拖拽后的位置更新外部卡片区域的样式，保证一致性。这通常通过CSS类名或者计算属性来控制。

上述代码只是一个基本示例，实际应用中可能还需要考虑组件化、状态管理（Vuex）、错误处理等因素。记住在Vue中始终要确保数据驱动视图，将状态变更和UI更新解耦。