iview Table 实现单个按钮拖拽调整行顺序功能【超简洁步骤】

本文链接：https://blog.youkuaiyun.com/weixin_38989540/article/details/131197906

在iview前端框架中，通过设置Table的draggable属性为false，并给行内的特定按钮添加draggable=true，可以实现点击按钮才触发拖拽功能。此外，推荐了HTTP模拟请求工具BB-API和基于WEB的堡垒机服务。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

概述

在使用iview(View UI Plus)前端框架下的Table实现拖拽调整行顺序功能时，默认情况下在Table控件添加draggable属性即可实现拖拽调整行顺序功能。但是点击行的任意一个位置都会触发拽调整行顺序功能，那要如何实现点击某个按钮再触发拖拽功能呢，很简单，看如下代码。

<Table draggable="false">
	<template #action="{ row ,index}">
      <d-row>
        <d-col><d-button draggable="true" icon="icon-collapse-info" title="上下移动" size="sm" /></d-col>
      </d-row>
    </template>
</Table>

关键点描述
在Table添加draggable="false"属性
在行内上下移动按钮添加draggable="true"

这时再点击上下移动按钮可触发拖拽，点击行的其他位置不会触发拖拽。

接下来更精彩，请勿走开(以下是私事，不喜欢别往下看了)

好用的HTTP模拟请求工具

市面上有很多HTTP模拟请求工具，有yapi，有ApiPost，好不好用在此不做评价。这里推荐使用BB-API,功能全面，免费使用、资源无限制，自动生成接口文档，界面简洁大气。支持局域网部署，打造属于你、公司的HTTP 协议管理工具。
官网地址http://bbapi.yun-api.com/