表格拖拽

开源插件: vuedraggable

二次封装

• 由于项目中使用的是element-ui这个UI库，无法直接拖拽，这里就自己实现一个简易的table组件，接收一些自定义配置，与element同风格。

• vuedraggable基础配置

• 编写组件

点击查看代码

export default {
  name: 'DragTable',
  components: { dragable },
  props: {
    tableLable: {
      type: Array,
      required: true
    },
    tableList: {
      type: Array,
      required: true
    },
    singleData: {
      type: Object,
      default: null
    },
    specialOptions: {
      type: Object,
      default: null
    },
    submitLoading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      btnLoading: this.submitLoading,
      lastIndex: 0,
      oldLastIndex: 0,
      orderId: 0,
      tableOverflow: false,
      tableData: this.tableList.length > 0 ? this.tableList : [],
      dragOptions: {
        animation: 150,
        ghostClass: 'drag-class'
      }
    }
  },
  computed: {
    tdData(data) {
      return data => {
        if (!data) return ''
        return Object.keys(data)
      }
    }
  }
}

• 组件中使用

<drag-table 
  :key="dragTableKey"
  :table-lable="lessonTableLable"
  :table-list="lessonTableData"
  :special-options="specialOptions"
  :single-data="lessonFormData"
  :submit-loading="submitLoading"
  @submitTableData="submitAllLesson"
/>

• 关于组件的key: 由于项目需要每次都要更新组件数据，给组件加上一个不断变化的key值，每次重新渲染组件。

效果