效果图

因项目采用的是Vue2，所以这个功能目前采用的是Vue2的写法。 Vue3请自行修改扩展代码；或收藏关注帖子，后续Vue3项目如有用到会在本帖子更新修改。

安装vuedraggable（拖拽插件）

cnpm i vuedraggable

先说用法，下方附全源码

引入自定义表头组件

import indicatorTable from "@/components/indicatorTable/index.vue";

使用：（传参说明已在下方标识）

ref="rois"

:defaultArr="columns"

:cardDataProp="cardDataProp"

cacheKeyProp="keyROI"

@propData="propsTableHander"

currenKey="ROT"

/>

props参数说明：（均为必传字段）

// ref：用于调用子组件方法。

// columns：表头数据，例如：

[{

prop: "cost_platform",

label: "广告金",

}]

// cardDataProp:可选表头复选框，列如：

cardDataProp: [

{

title: "指标", // 每一项的分类title标题，详见第一张效果图

checkboxes: [...columns], // columns这个就是上面的一样

},

],

// cacheKeyProp：储存的key名，名字自定义来，避免缓存的key一样就行，列如：

cacheKeyProp="keyROI"

// propData：回调方法，用于更新表头，接受函数，直接表头columns数据 = 参数即可

// currenKey：保存的指标key，避免缓存的key一样就行。

页面table使用方法，需用循环：

v-loading="loading"

:data="tableList"

border

@sort-change="tableSort"

:height="tableHeight"

ref="tableRef"

>

v-for="item in columns"

:prop="item.prop"

:label="item.label"

:width="item.width"

align="center"

sortable="custom"

:show-overflow-tooltip="true"

>

上面表格的参数不用多说了吧，除非你不会前端！

附源码（拿来直接用！只要参数没问题！）

如遇到报错、不显示等问题，一定是参数不对！已自测 无任何报错或警告信息！ 如需要Vue3版本，自行开发或私信，有空定会帮助！ 新建组件直接复制：

上方注释扩展方法说明： 比如你上方有筛选条件需要关联切换的，拿我自己的例子，见顶部ROI区域 他筛选条件有一个ROI、ROI倍数的筛选。然后字段展示是ROI123456…等，是循环的数量。切换ROI倍数的时候 表头原有的ROI需要变成ROI倍数 以及prop也一样要变化。 列如顶部ROI附加复选框的方法：

this.cardDataProp[1] = {

title: "ROI指标",

checkboxes: Array.from(

{ length: this.queryParams.displayNum },

(_, i) => ({

prop: `roi${i + 1}${

this.queryParams.displayType == 1 ? "_rate" : ""

}`,

label: `ROI${i + 1}${

this.queryParams.displayType == 2 ? "倍数" : ""

}`,

})

),

};

筛选条件选择切换displayType类型后调用 this.$refs.rois.getPointData("init"); 刷新表头

以上根据了选项displayType变化label和prop 但又是属于同一个label表头 只是字段不一样的 或者要用循环的，可采用这种方式，扩展方法自己研究…估计没有其他人需要用这个扩展的，就注释了，不用的可以删掉！

感谢你的阅读，如对你有帮助请收藏+关注！ 只分享干货实战和精品，从不啰嗦！！！ 如某处不对请留言评论，欢迎指正~ 博主可收徒、常玩QQ飞车，可一起来玩玩鸭~

推荐链接

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：