vue 实现table上下拖拽行功能

烂笔头儿@2025-05-29 22:47

在项目中要实现表格可以上下拖拽行，这样一个功能

下面是实现的代码

html 复制代码

<div class="tablebox">
          <div class="head">
            <div class="borderright" style="width: 30%">显示</div>
            <div class="borderright" style="width: 60%">列名</div>
            <div class="borderright" style="width: 30%">拖动调整顺序</div>
          </div>
          <div
            v-for="(item, index) in items"
            :key="item.id"
            draggable="true"
            @dragstart="dragStart(index)"
            @dragover.prevent
            @drop="drop(index)"
            class="line"
          >
            <div class="borderright" style="width: 30%">
              <el-checkbox />
            </div>
            <div class="borderright" style="width: 60%">{{ item.name }}</div>
            <div class="borderright" style="width: 30%">
              <el-button type="" icon="Operation" link></el-button>
            </div>
          </div>
        </div>

//---------------js代码------------------------------

html 复制代码

const items = ref([
  { id: 1, name: 'Item 1', value: 'Value 1' },
  { id: 2, name: 'Item 2', value: 'Value 2' },
  { id: 3, name: 'Item 3', value: 'Value 3' },
])

let dragIndex = null

const dragStart = (index) => {
  dragIndex = index
}

const drop = (newIndex) => {
  if (dragIndex !== newIndex) {
    const toBeMoved = items.value[dragIndex]
    items.value.splice(dragIndex, 1)
    items.value.splice(newIndex, 0, toBeMoved)
    dragIndex = null
  }
}

//------------------css样式-----------------------------

html 复制代码

.tablebox {
  border-top: 1px solid #e4e4e4;
  border-left: 1px solid #e4e4e4;
  .head {
    display: flex;
    background: #f5f5f5;
    .borderright {
      border-right: 1px solid #e4e4e4;
      border-bottom: 1px solid #e4e4e4;
      text-align: center;
      font-size: 13px;
      color: #333333;
      font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
      font-weight: 700;
      line-height: 40px;
    }
  }
  .line {
    display: flex;
    line-height: 40px;
    .borderright {
      border-right: 1px solid #e4e4e4;
      border-bottom: 1px solid #e4e4e4;
      text-align: center;
    }
  }
}

希望可以帮到你~

看到这如果对你有用的话不如留下你的足迹

加个关注

不迷路~~~~