如何利用穿梭框完成自定义表格表头

原创

已于 2023-05-16 16:57:55 修改 · 827 阅读

于 2023-05-16 16:55:21 首次发布

前言:

最近在项目中遇到新的需求,客户需要能够自己配置对应的表头并打印。第一想法就是利用穿梭框去完成对表头的自定义配置。但是因为element-plus中的穿梭框满足不了我想要的功能,只能去单独封装一个穿梭框。

一、封装穿梭框

穿梭框主要是为了获取到选择字段的数组,通过这个数组在表头中渲染完成自定义表头配置。勾选后将所勾选的字段放入选择字段数组中,再通过sort对数组进行排序

源码:

<template>
  <div class="shuttle">
    <!-- 左边列表 -->
    <div class="shuttle-box">
      <div class="shuttle-box-title">
        <div> <span>未选择字段</span></div>
        <div class="index-num">{
  
  {itemLeft.length}}</div>
      </div>
      <div class="shuttle-box-list">
        <el-checkbox-group v-model="checkLeft">
          <el-checkbox style="display: block;" v-for="(vo,inx) in itemLeft" :label="inx" :key="inx">{
  
  {vo.name}}</el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
    <!-- 左右操作按钮 -->
    <div class="shuttle-click" v-if="isEdit">
      <span @click="goLeft">←</span>
      <span @click="goRight">→</span>
    </div>
    <!-- 右边列表 -->
    <div class="shuttle-box">
      <div class="shuttle-box-title">
        <div>已选择字段</div>
        <div class="index-num">{
  
  {itemRight.length}}</div>
      </div>
      <div class="shuttle-box-list">
        <el-checkbox-group v-model="checkRight">
          <el-checkbox style="display: block;position: relative;" v-for="(vo,inx) in itemRight" :label="inx" :key="inx">
            &l

标签