基于Vue.Draggable二次封装table

之前有需求做表格拖拽使用sortablejs, 后来发现vue有一个Vue.Draggable插件也是基于sortablejs.用来做表格拖拽的. 于是尝试用vue.Draggable的表格和之前封装 simple-table 再次进行封装, 拖拽排序表格的组件: 实现如下:

使用vue-draggable的dragSelect tbody获取表格
通过 cansort 来控制 row是否接受控制 进入可拖拽状态
使用已经封装好的simple-table组件 做表格内容传递 headData

简单表格封装

<template>
  <td-draggable element="div" :list="$attrs.data" v-on="$listeners" v-model="newList" dragSelector="tbody" :options="{draggable: canSort?'.el-table__row':''}">
    <simple-table v-on="$listeners" v-bind="$attrs" :head-data="headData" :row-style="rowStyle">
      <template :slot="prop" slot-scope="scope" v-for="(value, prop) in $scopedSlots">
        <slot :name="prop" v-bind="scope"></slot>
      </template>
    </simple-table>
  </td-draggable>
</template>

<script>
import TdDraggable from '@/assets/packages/draggable/index'
import SimpleTable from './simple-table'
export default {
  name: 'simple-table-sort',
  components: {
    SimpleTable,
    TdDraggable
  },
  data () {
    return {
      newList: this.$attrs.data
    }
  },
  computed: {
    rowStyle () {
      if (this.canSort) return {'cursor': 'move'}
    }
  },
  props: {
    headData: Array,
    canSort: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus">
</style>

使用:

<simple-table-sort
          :head-data="tableHead"
          :show-index="true"
          :height="scope.height"
          :data="categorySort"
          :can-sort="canSort"
          @change="sortChange">
          <!-- 品类名称列 -->
          <template slot-scope="scope" slot="name">
            <div class="c-column">
              <span>{{ scope.row.categoryName }}</span>
            </div>
          </template>
          <!-- 商品数量列 -->
          <template slot-scope="scope" slot="count">
            <div class="c-column">
              <span>{{ scope.row.goodsCount }}</span>
            </div>
          </template>
          <!-- 操作列 -->
          <template slot-scope="scope" slot="operation">
            <div class="c-column">
              <el-button
                type="text"
                @click="relevantGoods(scope.row.id, scope.row.goodsCategoryID, scope.row.categoryName, scope.row.isSupportVip)">关联商品</el-button>
              <el-button
                type="text"
                @click="deleteCategory(scope.row.goodsCategoryID, scope.row.id)">删除</el-button>
            </div>
          </template>
        </simple-table-sort>
data() {
  return{
 tableHead: [
        { label: '已关联品类', prop: 'name', width: '60%', align: 'center' },
        { label: '已关联商品数量', prop: 'count', width: '20%', align: 'center' },
        { label: '操作', prop: 'operation', width: '20%', align: 'center' }
      ],
}
}

xuanweiH / Project-issue

基于Vue.Draggable二次封装table #5