没有合适的资源？快使用搜索试试~ 我知道了~

文库首页前端Javascript随机拖动字段生成数据分析报表

随机拖动字段生成数据分析报表

需积分: 5 0 下载量 24 浏览量 2023-10-19 13:40:19 上传评论收藏 157KB DOCX 举报

温馨提示

试读

13页

设置三个模块区域，随机拖动字段块到区域中，生成对应的数据分析报表

资源推荐

资源详情

资源评论

1、数据原结构

2、需要实现的效果

3、代码实现

父组件：

<main>

<Draggable

class="item-container item-container1"

group="drag"

v-model:list="allProps"

item-key="name"

<div class="item">{{ element.name }}</div>

</template>

</Draggable>

<Draggable

class="item-container item-container2"

group="drag"

v-model:list="baseProps"

item-key="name"

<div class="item">{{ element.name }}</div>

</template>

</Draggable>

<Draggable

class="item-container item-container3"

group="drag"

v-model:list="multiLevelProps"

item-key="name"

<div class="item">{{ element.name }}</div>

</template>

</Draggable>

<Draggable

class="item-container item-container4"

group="drag"

v-model:list="groupProps"

item-key="name"

<div class="item">{{ element.name }}</div>

</template>

</Draggable>

<el-table :data="brr" border :span-method="objectSpanMethod">

<el-table-column

v-for="item in groupProps"

:prop="item.prop"

:label="item.name"/>

<MultiHeaders

:multiHeaders="multiHeaderValues"

:baseProps="baseProps"

v-if="multiLevelProps && multiLevelProps.length"/>

<el-table-column

v-for="item in baseProps"

:prop="item.prop"

:label="item.name"

v-else/>

</el-table>

</main>

</div>

</template>

import {ref,onMounted, computed,watch} from "vue"

import Draggable from "vuedraggable"

import {receiptList} from "@/api/financeManage" //数据列表接口，按自己业务修改

import MultiHeaders from "./MultiHeaders.vue" //子组件

//全部表头属性

const allProps = ref([

{

prop: "businessNo",

{

prop: "caseNum",

{

prop: "customerName",

{

prop: "feeCodeName",

{

prop: "mblNo",

{

剩余12页未读，继续阅读

评论收藏

内容反馈

资源评论

资源反馈

评论星级较低，若资源使用遇到问题可联系上传者，3个工作日内问题未解决可申请退款~

ZYJ~

粉丝: 63
资源: 6

上传资源快速赚钱

我的内容管理展开

我的资源快来上传第一个资源

我的收益

登录查看自己的收益

我的积分登录查看自己的积分

我的C币登录后查看C币余额

我的收藏

我的下载

下载帮助

前往需求广场，查看用户热搜

随机拖动字段生成数据分析报表

100以内随机加减法生成器,可改范围,向下拖动即可生成

JS实现点击按钮随机生成可拖动的不同颜色块示例

Visual C++程序开发范例宝典(光盘) 第四部分

Visual C++程序开发范例宝典(光盘) 第八部分

Visual C++ 程序开发范例宝典 源码 光盘 part2

Delphi开发范例宝典目录

Visual C++程序开发范例宝典(PDF扫描版).part2

Visual C++程序开发范例宝典(PDF扫描版).part3

asp.net知识库

C#编程经验技巧宝典

MAPGIS地质制图工具

C#.net_经典编程例子400个

C#开发典型模块大全(光盘)

C#开发典型模块大全（光盘）第一部分

C#开发实例大全（基础卷）.软件开发技术联盟(带详细书签) PDF 下载

C#开发典型模块大全（光盘）第二部分

axure谷歌浏览器插件

echarts 全国地图json数据

element-ui v2.15.13离线文档.rar

marktext0.17.1中文版本-【免费资源未商用不存在版权问题】-【请审核大大放过】.zip

html网页做的动态爱心（超好看）

微信小程序登录注册界面代码，包含当前界面的所有源码，使用手机验证码注册或账号登录

2023跨年代码(烟花+背景音乐)

最新资源

Visual C++ 程序开发范例宝典源码光盘 part2