自定义拖拽列表

最新推荐文章于 2025-09-25 14:34:23 发布

原创

最新推荐文章于 2025-09-25 14:34:23 发布 · 404 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

博客展示了DataAnalysis.vue和MultiHeaders.vue的效果图，涉及Vue.js和ElementUI等前端技术，这些组件在前端开发中可用于构建用户界面，实现特定功能。

效果图

DataAnalysis.vue

<template>
  <div class="app-container">
    <div class="operate">
      <el-select class="t_select" v-model="templateName" clearable placeholder="模版" size="default" @clear="clearTemplateData" @change="templateData">
        <el-option v-for="item in templateList" :key="item.id" :label="item.templateName" :value="item.id"/>
      </el-select>
      <el-button @click="setTemplate" type="primary" size="default">保存模版</el-button>
      <el-button @click="excelExport" type="primary" size="default">Excel导出</el-button>
    </div>

    <main>
      <!-- 所有属性 -->
      <Draggable
          class="item-container item-container1"
          group="drag"
          v-model:list="allProps"
          item-key="label"
      >
        <template #item="{ element }">
          <div class="item">{
  
  { element.label }}</div>
        </template>
      </Draggable>

      <!-- 多级表头子属性：基础表头① -->
      <Draggable
          class="item-container item-container2"
          group="drag"
          v-model:list="baseProps"
          item-key="label"
      >
        <template #item="{ element }">
          <div class="item">{
  
  { element.label }}</div>
        </template>
      </Draggable>

      <!-- 多级表头：③  -->
      <Draggable
          class="item-container item-container3"
          group="drag"
          v-model:list="multiLevelProps"
          item-key="label"
      >
        <template #item="{ element }">
          <div class="item">{
  
  { element.label }}</div>
        </template>
      </Draggable>

      <!-- 分组属性：② -->
      <Draggable
          class="item-container item-container4"
          group="drag"
          v-model:list="groupProps"
          item-key="label"
      >
        <template #item="{ element }">
          <div class="item">{
  
  { element.label }}</div>
        </template>
      </Draggable>

      <!-- 表格展示数据     -->
      <el-table :data="brr" border :span-method="objectSpanMethod">
        <el-table-column
            v-for="item in groupProps"
            :prop="item.prop"
            :label="item.label"/>
        <MultiHeaders
            :multiHeaders="multiHeaderValues"
            :baseProps="baseProps"
            v-if="multiLevelProps && multiLevelProps.length"/>
        <el-table-column
            v-for="item in baseProps"
            :prop="item.prop"
            :label="item.label"
            v-else/>
      </el-table>

    </main>

    <el-dialog v-model="isShowTemplate" title="设置模版" width="30%">
      <el-form label-width="100px" :model="tForm" style="max-width: 460px">
        <el-form-item label="模版名称">
          <el-input v-model="tForm.templateName"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="isShowTemplate = false">取消</el-button>
          <el-button type="primary" @click="saveTemplate">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref,onMounted, computed,watch,getCurrentInstance} from "vue"
import Draggable from "vuedraggable"
import MultiHeaders from "./MultiHeaders.vue"
import {useRoute} from "vue-router";
import {useStore} from "vuex";
import {useStorage} from "@vueuse/core";
import {parseTime} from "@/utils/ruoyi";
import {getAnalysisTemplate,saveAnalysisTemplate} from "@/api/common/dataAnalysis";

const route = useRoute()
document.title = '数据分析'
const store = useStore()
const {proxy} = getCurrentInstance()
//全部表头属性
const allProps = ref([
  {
    label: "项目编码",
    prop: "businessNo",
  },
  {
    label: "箱号",
    prop: "caseNum",
  },
  {
    label: "客户",
    prop: "customerName",
  },
  {
    label: "费用类型",
    prop: "feeCodeName",
  },
  {
    label: "提单号",
    prop: "mblNo",
  },
  {
    label: "币种",
    prop: "currencyName",
  },
  {
    label: "数量",
    prop: "num",
  },
  {
    label: "金额",
    prop: "shouldReceipt",
  },
])
//基础表头属性①