技術標籤：vue.jsjavascript

vue-draggable文件
安裝

npm i -S vuedraggable

main.js 引入

import Draggable from 'vuedraggable';
const components = {
    Draggable
};

html

<Table border :columns="columns1" :data="data1" ></Table>

				<Draggable
                    :list="data1_2"
 

                    group="people"
                    :fallback-tolerance="1"
                    :force-fallback="true"
                    @move="drgmove1"
                    @setData="drgmove2"
                    @Start="drgmove3"
                    @End=
 
"drgmove4"
                    @Add="drgmove5"
                    @Update="drgmove6"
                    @Remove="drgmove7"
                    @Filter="drgmove8"
                    @Clone="drgmove9"
                    @choose="drgmove10"
 

                    @change="log"
                    style="width: 100%;height:400px;"
                  >
                  </Draggable>

定義(data)

      data1_2: [],
      tableDataId: 0,
      columns1: [
        {
          title: "資料日期",
          id: '0',
          tId: '0',
          key: "date",
          align: "center",
          width: 120,
          source: '訂單',
          renderHeader: (h, params) => {
            return this.headerDraagble(h, params)
          }
        },
        {
          title: "商品類目",
          key: "splm",
          id: '3',
          tId: '3',
          align: "center",
          width: 100,
          source: '訂單',
          renderHeader: (h, params) => {
            return this.headerDraagble(h, params)
          }
        },
        {
          title: "支付機構",
          key: "zfjg",
          id: '4',
          tId: '4',
          align: "center",
          width: 100,
          source: '訂單',
          renderHeader: (h, params) => {
            return this.headerDraagble(h, params)
          }
        },
        {
          title: "訂單總量",
          align: "center",
          id: '5',
          tId: '5',
          source: '訂單',
          renderHeader: (h, params) => {
            return this.headerDraagble(h, params)
          },
          children: [
            {
              title: "線上支付訂單",
              key: "zxzfdd",
              id: '5-1',
              tId: '5-1',
              align: "center",
              width: 130,
              source: '訂單',
              renderHeader: (h, params) => {
            return this.headerDraagble(h, params)
          }
            },
            {
              title: "貨到付款訂單",
              key: "hdfkdd",
              id: '5-2',
              tId: '5-2',
              align: "center",
              width: 130,
              source: '訂單',
              renderHeader: (h, params) => {
            return this.headerDraagble(h, params)
          }
            },
          ],
        },
        {
          title: "線上支付訂單",
          align: "center",
          id: '6',
          tId: '6',
          source: '訂單',
          renderHeader: (h, params) => {
            return this.headerDraagble(h, params)
          },
          children: [
            {
              title: "線上支付訂單",
              key: "zxzfdd2",
              id: '6-1',
              tId: '6-1',
              align: "center",
              width: 130,
              source: '訂單',
              renderHeader: (h, params) => {
                return this.headerDraagble(h, params)
              },
            },
            {
              title: "線上支付訂單金額",
              key: "zxzfddje",
              id: '6-2',
              tId: '6-2',
              align: "center",
              width: 130,
              source: '訂單',
              renderHeader: (h, params) => {
            return this.headerDraagble(h, params)
          }
            },
          ],
        },
        {
          title: "交易額",
          key: "jye",
          id: '7',
          tId: '7',
          align: "center",
          minWidth: 100,
          source: '訂單',
          renderHeader: (h, params) => {
            return this.headerDraagble(h, params)
          }
        },
      ],

方法

    // 表格頭可以拖拽
    headerDraagble(h, params) {
      return h('Draggable', {
                props: {
                  list: [params.column],
                  clone: this.cloneDog,
                },
                on: {
                  choose: this.chooseLog,
                  remove: this.sks1,
                  move: this.sks2,
                  setData: this.sks3,
                  Start: this.sks4,
                  End: this.sks5,
                  Add: this.sks6,
                  Update: this.sks7,
                  Filter: this.sks8,
                  change: this.sks9
                },
                attrs: {
                // 關鍵程式碼
                // props裡設定group無效，需要在attrs裡設定
                // name 相同的可以互相拖拽 ，具體api可以看文件
                  group: { name: 'people', pull: 'clone', put: false },
                  'fallback-tolerance': "1",
                  'force-fallback': true,
                },
            },[ h('span', params.column.title) ]);
    },
    // 克隆
    cloneDog(data) {
      data = JSON.parse(JSON.stringify(data))
      let columns1data = JSON.parse(JSON.stringify(this.columns1))
      if(data.id.indexOf('-') != '-1') {
        let pId = data.id.slice(0,data.id.indexOf('-'))
        let pClms = columns1data.filter(item => {
          return item.id === pId
        })
        let pChildren = pClms[0].children.filter(item => {
          return item.id === data.id
        })
        pClms[0].id = String(this.tableDataId++)
        pClms[0].children = pChildren
        pClms[0].children[0].id = pClms[0].id + '-1'
        return pClms[0]
      } else {
        let datas = JSON.parse(JSON.stringify(data))
        datas.id = String(this.tableDataId++)
        return datas
      }
    },