vuetify表格自定义拖拽排序

图例：

 

 

1、首先安装sortablejs

npm install sortablejs

2、页面引入

<template>
  <div id="standardAssay">
    <div class="tabListOne">
      <v-card class="mx-auto">
        <div class="tableTitle">
          <div class="titleName">标准检测项目配置</div>
          <div class="titleBtn">
            <div v-if="ifEdit">
              <v-btn
                dark
                width="96"
                height="40"
                color="#0B41CD"
                dense
                hide-details
                style="color: #fff"
                @click="itemEdit"
              >
                <v-icon dark left dense>mdi-pencil-box-outline</v-icon> 编辑
              </v-btn>
            </div>
            <div v-if="!ifEdit">
              <v-btn
                dark
                width="96"
                height="40"
                color="#0B41CD"
                dense
                hide-details
                style="color: #fff"
                :loading="isSaveData"
                @click="itemSave"
              >
                保存
              </v-btn>
              <v-btn
                dark
                width="96"
                height="40"
                outlined
                color="indigo"
                dense
                hide-details
                style="margin-left: 16px"
                @click="itemCancel"
              >
                取消
              </v-btn>
            </div>
          </div>
        </div>
        <v-data-table
          :headers="tableDataHead"
          :items="tableDataList"
          :items-per-page="10"
          class="elevation-1 tableAllStyl"
          :server-items-length="total"
          hide-default-footer
          :loading="isData"
          id="tableRowDrop"
          disable-sort
          item-key="sortId"
        >
          <template v-slot:[`item.sort`]="{ item }">
            <div class="sortStyl">
              <span class="sortName">{{ item.sort }}</span>
              <span class="iconRisk"
                ><v-icon size="20" color="#9e9e9e">mdi-menu</v-icon></span
              >
            </div>
          </template>
          <template v-slot:[`item.dataType`]="{ item }">
            <div>
              {{
                item.dataType === 1
                  ? "数值"
                  : item.dataType === 2
                  ? "文本"
                  : "-"
              }}
            </div>
          </template>
          <template v-slot:[`item.isStatistics`]="{ item }">
            <div v-if="!ifEdit">
              <el-radio-group v-model="item.isStatistics">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </div>
            <div v-if="ifEdit">{{ item.isStatistics === 1 ? "是" : "否" }}</div>
          </template>
          <template v-slot:[`item.detail`]="{ item }">
            <div v-show="item.conclusionOption">
              <el-popover placement="left-end" width="200" trigger="click">
                <div class="viewConclu">
                  <div class="concluTopName">
                    <div>结论</div>
                    <div>是否异常</div>
                  </div>
                  <div class="concluBtmCont">
                    <div
                      class="btmContLi"
                      v-for="(item, index) in item.conclusionOptionNew"
                      :key="index"
                    >
                      <div>{{ item.label }}</div>
                      <div>
                        <span v-show="item.status === 1" style="color: #212631"
                          >正常</span
                        >
                        <span v-show="item.status === 0" style="color: #c80000"
                          >异常</span
                        >
                      </div>
                    </div>
                  </div>
                </div>
                <span
                  slot="reference"
                  style="color: #0b41cd; padding: 0 8px; cursor: pointer"
                  >查看</span
                >
              </el-popover>
            </div>
            <div v-show="!item.conclusionOption">-</div>
          </template>
        </v-data-table>
      </v-card>
    </div>
  </div>
</template>

<script>
import {
  getStandandItem, getStandSubmit
} from '@/api/limitApi/index.js'
import SortableRow from 'sortablejs'
export default {
  name: 'standardAssay',
  components: {},
  computed: {

  },
  data: () => ({
    isSaveData: false,
    ifEdit: true,
    isData: false,
    total: 0,
    tableDataHead: [
      {
        text: '111',
        align: 'start',
        value: 'code'
      },
      { text: '222', value: 'name' },
      { text: '333', value: 'hpCode' },
      { text: '444', value: 'hpName' },
      { text: '555', value: 'dataType' },
      { text: '666', value: 'unit' },
      { text: '777', value: 'valueRange' },
      { text: '888', value: 'isStatistics', width: '150' },
      { text: '999', value: 'sort' },
      { text: '100', value: 'detail' }
    ],
    tableDataList: [],
    rowSort: null,
    itemListJson: []
  }),
  created() {

  },
  mounted() {
    this.getDataPage()
    document.body.ondrop = function (event) {
      event.preventDefault()
      event.stopPropagation()
    }
  },
  methods: {
    itemEdit() {
      this.ifEdit = false
      this.rowDrop()
    },
    async itemSave() {
      this.ifEdit = false
      this.itemListJson = []
      this.tableDataList.forEach((item, index) => {
        this.itemListJson.push({
          code: item.code,
          isStatistics: item.isStatistics,
          sort: index + 1
        })
      })
      await this.itemSaveSubmit()
    },
    itemSaveSubmit() {
      const data = {
        listJson: JSON.stringify(this.itemListJson)
      }
      this.isSaveData = true
      getStandSubmit(data).then(
        (resp) => {
          if (resp.code === 0) {
            this.$message({
              message: '保存成功',
              type: 'success'
            })
            this.ifEdit = true
            this.rowSort.destroy()
            this.getDataPage()
          } else {
            this.$message.error(resp.errorMessage)
          }
          this.isSaveData = false
        },
        (error) => {
          this.isSaveData = false
          this.$message.error(error)
        }
      )
    },
    itemCancel() {
      this.ifEdit = true
      this.rowSort.destroy()
      this.getDataPage()
    },
    rowDrop() {
      const tbody = document.querySelector('#tableRowDrop tbody'),
        self = this
      this.rowSort = SortableRow.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const [currRow] = self.tableDataList.splice(oldIndex, 1)
          self.tableDataList.splice(newIndex, 0, currRow)
        }
      })
    },
    getLimit(perms) {
      return limitFn(perms)
    },
    getDataPage() {
      this.isData = true
      this.tableDataList = []
      const data = {
        typeList: [1, 2]
      }
      getStandandItem(data).then(
        (resp) => {
          if (resp.code === 0) {
            this.tableDataList = resp.payload
            for (let i = 0; i < this.tableDataList.length; i += 1) {
              this.tableDataList[i].sortId = i + 1
            }
            this.tableDataList.forEach((item) => {
              if (item.normalRangeStart !== undefined && item.normalRangeEnd !== undefined) {
                item.valueRange = `${item.normalRangeStart} - ${item.normalRangeEnd}`
              } else {
                item.valueRange = '-'
              }
              if (item.conclusionOption !== undefined) {
                item.conclusionOptionNew = JSON.parse(item.conclusionOption)
              }
              if (!item.hpCode) {
                item.hpCode = '-'
              }
              if (!item.hpName) {
                item.hpName = '-'
              }
              if (!item.unit) {
                item.unit = '-'
              }
            })
            this.total = resp.payload.length
          } else {
            this.$message.error(resp.errorMessage)
          }
          this.isData = false
        },
        (error) => {
          this.isData = false
          this.$message.error(error)
        }
      )
    }
  },
  destroyed() {

  }
}
</script>

<style lang="less" scoped>
.viewConclu {
  display: flex;
  flex-direction: column;
  padding: 6px;
  .concluTopName {
    display: flex;
    justify-content: space-between;
    color: #212631;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
  }
  .concluBtmCont {
    display: flex;
    flex-direction: column;
    .btmContLi {
      display: flex;
      justify-content: space-between;
      color: #212631;
      font-size: 14px;
      margin-bottom: 16px;
    }
  }
}
.sortStyl {
  width: 60px;
  display: flex;
  .sortName {
    min-width: 32px;
  }
}
.tableAllStyl {
  ::v-deep tbody {
    tr {
      cursor: move;
    }
  }
  ::v-deep .v-data-table__wrapper {
    max-height: 2000px !important;
  }
}
.tableTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 26px 24px 80px;
  box-sizing: border-box;
  .titleName {
    font-size: 26px;
    color: #212631;
    font-weight: 700;
  }
}
a {
  text-decoration: none;
}
</style>