vue+element表格穿梭框

最新推荐文章于 2024-06-18 22:19:26 发布
最新推荐文章于 2024-06-18 22:19:26 发布
阅读量1k 收藏 8
点赞数
分类专栏： 项目中遇到的问题 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62008199/article/details/128682747
版权

表格穿梭框

第一版样式

1673663036640

引入
  <!-- 调试增加 -->
<shuttleFrame
     @routersPerson="routersPerson"
     :rightPerson="rightPerson"
     :formType="formType"
   ></shuttleFrame>
代码：
<template>
  <div class="general">
    <div class="topLeft">
      <el-card class="box-card">
        <span class="changeWords">可选用户</span>
        <el-row>
          <el-form ref="searchform" :model="searchForm">
            <el-col :span="10">
              <el-form-item prop="userName">
                <el-input
                  :placeholder="'请输入人员姓名'"
                  clearable
                  v-model="searchForm.userName"
                  style="width: 95%"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item prop="teamId">
                <el-select
                  v-model="searchForm.teamId"
                  placeholder="请选择队伍"
                  @change="handleRanks"
                  style="width: 95%"
                  filterable
                >
                  <el-option
                    v-for="item in ranksList"
                    :key="item.id"
                    :label="item.teamName"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="10">
              <el-form-item prop="teamClassId">
                <el-select
                  v-model="searchForm.teamClassId"
                  placeholder="请选择班组"
                  style="width: 95%"
                  filterable
                >
                  <el-option
                    v-for="item in teamList"
                    :key="item.id"
                    :label="item.tGroupName"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="14">
              <div class="rightbtn">
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  @click="searchlist"
                  class="marginL"
                  >查询
                </el-button>
                <el-button icon="el-icon-refresh-left" @click="resetform"
                  >重置</el-button
                >
              </div>
            </el-col>
          </el-form>
        </el-row>
        <el-row>
          <el-table
            ref="leftTableData"
            :data="leftTableData"
            style="width: 100%"
            max-height="250"
            @selection-change="changeCheckBoxValue"
          >
            <template slot="empty">
              <el-empty :image-size="100" description="暂无数据"></el-empty>
            </template>
            <el-table-column
              type="selection"
              width="55"
              :selectable="
                (row) => {
                  return !rightTableData.find((v) => v.ciId == row.ciId);
                }
              "
            ></el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              fixed
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column prop="ciGender" label="性别" show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="ciTel"
              label="联系电话"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="teamName"
              label="所属队伍"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="tGroupName"
              label="所属班组"
              show-overflow-tooltip
            >
            </el-table-column>
          </el-table>
        </el-row>
      </el-card>
    </div>
    <div class="topCenter">
      <el-button type="primary" :disabled="add" @click="handleAdd"
        >添加<i class="el-icon-arrow-right el-icon--right"></i
      ></el-button>
    </div>
    <div class="topRight">
      <el-card class="box-card">
        <span class="changeWords">已选用户</span>
        <el-row>
          <el-table
            ref="rightTableData"
            :data="rightTableData"
            style="width: 100%"
            max-height="373"
          >
            <template slot="empty">
              <el-empty :image-size="100" description="暂无数据"></el-empty>
            </template>
            <el-table-column
              prop="name"
              label="姓名"
              fixed
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column label="操作" width="80">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  @click="handleDelete(scope.$index, scope.row, rightTableData)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-card>
    </div>
  </div>
</template>
<script type="text/javascript">
import { attendClassFindCiUser, ciUserFindOther } from "@/api/personnel";
export default {
  data() {
    return {
      searchForm: {
        userName: "",
        teamId: "",
        teamClassId: "",
      },
      add: true,
      del: true,
      leftTableData: [],
      rightTableData: [],
      transfer: [], //数据转移
      ranksList: [], //队伍
      teamList: [], //班组
    };
  },
  props: {
    //编辑传过来的人员
    rightPerson: {
      type: Array,
    },
  },
  created() {
    this.queryRoster();
    this.getoptions();
  },
  watch: {
    rightTableData: function (val) {
      if (val && val.length) {
        this.$emit("routersPerson", val);
      }
      console.log("我是最终的数据", val);
    },
    rightPerson: function (val) {
      if (val.length) {
        let leftTableData = [];

        val.forEach((item) => {
          this.leftTableData.forEach((i) => {
            item.id == i.ciId && leftTableData.push(i);
          });
          //  this.$refs.leftTableData.toggleRowSelection(item,true);
        });
        leftTableData.forEach((i) => {
          console.log(11111);
          this.$refs.leftTableData.toggleRowSelection(i);
        });
        this.rightTableData = leftTableData;
        console.log("我是编辑人员", leftTableData);
      }
    },
  },
  methods: {
    //获取下拉内容
    async getoptions() {
      const data = await ciUserFindOther({
        pId: JSON.parse(localStorage.getItem("pId")),
      });
      this.ranksList = data.data;
      console.log("我是下拉队伍", this.ranksList);
    },
    //选择队伍添加班组
    handleRanks(id) {
      this.searchForm.teamClassId = "";
      this.ranksList.forEach((item) => {
        if (item.id == id) {
          this.teamList = item.teamGroupList;
        }
      });
      console.log("我是班组", this.teamList);
    },
    //查询
    searchlist() {
      (this.page = 1), this.queryRoster();
    },
    //重置
    resetform() {
      this.$refs["searchform"].resetFields();
      this.queryRoster();
    },
    //删除
    handleDelete(index, rows, data) {
      this.$refs.leftTableData &&
        this.$refs.leftTableData.toggleRowSelection(rows, false);
      data.splice(index, 1);
    },
    //选中
    handleAdd() {
      this.rightTableData = this.transfer;
      console.log("我是选中的人员苏剧", this.rightTableData);
    },
    //查询花名册人员
    async queryRoster() {
      let params = {
        pId: localStorage.getItem("pId"),
      };
      if (this.searchForm.userName) {
        params.userName = this.searchForm.userName;
      }
      if (this.searchForm.teamId) {
        params.teamId = this.searchForm.teamId;
      }
      if (this.searchForm.teamClassId) {
        params.teamClassId = this.searchForm.teamClassId;
      }

      let data = await attendClassFindCiUser(params);
      this.leftTableData = data.data;
    },
    //数据
    changeCheckBoxValue(val) {
      console.log("我是可选用户", val);
      if (val.length) {
        this.add = false;
        this.transfer = val;
      } else {
        this.add = true;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep {
  .el-button + .el-button {
    margin-left: 10px;
  }
}
.changeWords {
  display: inline-block;
  margin: 10px 0;
  font-size: 16px;
  font-weight: bold;
}
.general {
  display: flex;
  align-items: center;
}
.topLeft {
  width: 60%;
  // background: rgb(240, 239, 239);
}
.topCenter {
  width: 15%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.topRight {
  width: 25%;
  // height: 410px;
  // background: rgb(240, 239, 239);
}
.box-card {
  height: 433px;
}
</style>

优化后

取消了添加这一步,直接对左边数据的复选框进行点击取消的数据同步在右边的数据,可以直接使用
在这里插入图片描述

代码
<template>
  <div class="general">
    <div class="topLeft">
      <el-card class="box-card">
        <span class="changeWords">可选用户</span>
        <el-row>
          <el-form ref="searchform" :model="searchForm">
            <el-col :span="10">
              <el-form-item prop="userName">
                <el-input
                  :placeholder="'请输入人员姓名'"
                  clearable
                  v-model="searchForm.userName"
                  style="width: 95%"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item prop="teamId">
                <el-select
                  v-model="searchForm.teamId"
                  placeholder="请选择队伍"
                  @change="handleRanks"
                  style="width: 95%"
                  filterable
                >
                  <el-option
                    v-for="item in ranksList"
                    :key="item.id"
                    :label="item.teamName"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="10">
              <el-form-item prop="teamClassId">
                <el-select
                  v-model="searchForm.teamClassId"
                  placeholder="请选择班组"
                  style="width: 95%"
                  filterable
                >
                  <el-option
                    v-for="item in teamList"
                    :key="item.id"
                    :label="item.tGroupName"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="14">
              <div class="rightbtn">
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  @click="searchlist"
                  class="marginL"
                  >查询
                </el-button>
                <el-button icon="el-icon-refresh-left" @click="resetform"
                  >重置</el-button
                >
              </div>
            </el-col>
          </el-form>
        </el-row>
        <el-row>
          <el-table
            ref="leftTableData"
            :data="leftTableData"
            style="width: 100%"
            max-height="250"
            @selection-change="changeCheckBoxValue"
          >
            <template slot="empty">
              <el-empty :image-size="100" description="暂无数据"></el-empty>
            </template>
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              fixed
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column prop="ciGender" label="性别" show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="ciTel"
              label="联系电话"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="teamName"
              label="所属队伍"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="tGroupName"
              label="所属班组"
              show-overflow-tooltip
            >
            </el-table-column>
          </el-table>
        </el-row>
      </el-card>
    </div>
    <div class="topCenter">
      <!-- <el-button type="primary" :disabled="add" @click="handleAdd"
        >添加<i class="el-icon-arrow-right el-icon--right"></i
      ></el-button> -->
      -->
    </div>
    <div class="topRight">
      <el-card class="box-card">
        <span class="changeWords">已选用户</span>
        <el-row>
          <el-table
            ref="rightTableData"
            :data="rightTableData"
            style="width: 100%"
            max-height="373"
          >
            <template slot="empty">
              <el-empty :image-size="100" description="暂无数据"></el-empty>
            </template>
            <el-table-column
              prop="name"
              label="姓名"
              fixed
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column label="操作" width="80">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  @click="handleDelete(scope.$index, scope.row, rightTableData)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-card>
    </div>
  </div>
</template>
<script type="text/javascript">
import { attendClassFindCiUser, ciUserFindOther } from "@/api/personnel";
export default {
  data() {
    return {
      searchForm: {
        userName: "",
        teamId: "",
        teamClassId: "",
      },
      add: true,
      del: true,
      leftTableData: [],
      rightTableData: [],
      // transfer: [], //数据转移
      ranksList: [], //队伍
      teamList: [], //班组
    };
  },
  props: {
    //编辑传过来的人员
    rightPerson: {
      type: Array,
    },
    //判断是新增还是编辑
    formType: {
      type: Number,
      default: 0,
    },
  },
  created() {
    if (this.formType == 0) {
      this.queryRoster();
    }

    this.getoptions();
  },
  computed: {
  },
  watch: {
    rightPerson: function (val) {
      console.log(val);
      this.rightTableData = val.concat([]);
      if (this.rightTableData.length&&this.formType == 1) {
        this.queryRoster();
      }
    },
    rightTableData:function(val){
      if(val.length){
        this.$emit('routersPerson',val)
      }
    },
  },
  methods: {
    //获取下拉内容
    async getoptions() {
      const data = await ciUserFindOther({
        pId: JSON.parse(localStorage.getItem("pId")),
      });
      this.ranksList = data.data;
    },
    //选择队伍添加班组
    handleRanks(id) {
      this.searchForm.teamClassId = "";
      this.ranksList.forEach((item) => {
        if (item.id == id) {
          this.teamList = item.teamGroupList;
        }
      });
    },
    //查询
    searchlist() {
      (this.page = 1), this.queryRoster();
    },
    //重置
    resetform() {
      this.$refs["searchform"].resetFields();
      this.queryRoster();
    },
    //删除
    handleDelete(index, rows, data) {
      console.log("index, rows, data", index, rows, data);
      this.$refs.leftTableData &&
        this.$refs.leftTableData.toggleRowSelection(rows, false);
      // this.rightTableData.splice(index, 1);
    },
    //查询花名册人员
    async queryRoster() {
      let params = {
        pId: localStorage.getItem("pId"),
      };
      if (this.searchForm.userName) {
        params.userName = this.searchForm.userName;
      }
      if (this.searchForm.teamId) {
        params.teamId = this.searchForm.teamId;
      }
      if (this.searchForm.teamClassId) {
        params.teamClassId = this.searchForm.teamClassId;
      }

      let data = await attendClassFindCiUser(params);
      this.leftTableData = data.data;
      this.rightTableData.forEach((i) => {
        this.leftTableData.forEach((item) => {
          if (i.ciId == item.ciId) {
            this.$nextTick(() => {
              this.$refs.leftTableData.toggleRowSelection(item, true);
            });
          }
        });
      });
    },
    //数据  
    changeCheckBoxValue(val) {
      this.rightTableData = val;
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep {
  .el-button + .el-button {
    margin-left: 10px;
  }
}
.changeWords {
  display: inline-block;
  margin: 10px 0;
  font-size: 16px;
  font-weight: bold;
}
.general {
  display: flex;
  align-items: center;
}
.topLeft {
  width: 60%;
  // background: rgb(240, 239, 239);
}
.topCenter {
  width: 15%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.topRight {
  width: 25%;
  // height: 410px;
  // background: rgb(240, 239, 239);
}
.box-card {
  height: 433px;
}
</style>
想被带飞的鱼
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue ellmentUi自定义表格穿梭框
weixin_44826388的博客
05-25 2061
由于elementUi自带的transfer穿梭框中限制不能表格，现在自定义一个封装组件 <template> <el-row :gutter="20"> <el-col :span="11"> <el-input class="input" v-if="showSearch" v-model="searchLeft" placeholder="请输入搜索内容" &
Vue 关于element穿梭框进行的修改成table表格穿梭框
emmmmmmm__的博客
12-26 2952
Vue 关于element穿梭框进行的修改成table表格穿梭框 直接先看样式图 <!--弹出层 --> <el-dialog title="标题" :visible.sync="introductionVisible" width="70%"> <el-form :model="introductionForm" label-width="100px"> <el-row style="display:flex;just
vue 利用element的Table 表格实现自制的穿梭框（可以高度自定义）_vue 穿梭框
最新发布
2401_85123689的博客
06-18 660
其实可以从最后的效果图看出这个自制的穿梭框，只是由两个table表格和两个按钮组成，只需要写其中逻辑事件即可完成穿梭框的效果，其中的事件主要分为“选中”，“穿梭”和“删除”，其实也只是关于数组的增，删，改，查这些基本操作。其中要重点注意:row-style="setColor"和@current-change=“lineClick”，这两个触发的事件分别是：选中改变颜色和选中点击的选项的数据。
antd中在vue项目中自定义穿梭框
yangyanqin2545的博客
09-07 1686
1、完成代码
element-ui的Transfer 穿梭框拓展
weixin_51908375的博客
05-29 587
【代码】element-ui的Transfer 穿梭框拓展。
vue 利用element的Table 表格实现自制的穿梭框（可以高度自定义）
weixin_44283571的博客
09-23 3748
先看效果图：
vue+element-ui实现穿梭框数据自定义排序
12-05
在本文中，我们将深入探讨如何使用Vue.js框架与Element-UI库来实现穿梭框（Transfer）数据的自定义排序功能。Element-UI是基于Vue.js的一套丰富的UI组件库，其中包括了穿梭框组件，它常用于在两个列表之间进行数据的...
vue/element穿梭框组件
03-08
vue/element穿梭框组件
VUE Elemen-ui之穿梭框使用方法详解
10-14
在Vue.js开发中，Element UI库提供了一种方便的组件——穿梭框（Transfer），用于在两个列表之间进行数据的转移操作，常用于角色分配、权限设置等场景。本文将详细介绍如何在Vue项目中使用Element UI的穿梭框组件。 ...
前端 elementUI 穿梭框大量数据分页处理
03-03
总的来说，处理大量数据的穿梭框问题，我们需要结合前端工程的最佳实践，如分页、虚拟滚动、延迟加载等，同时充分利用Vue和ElementUI提供的特性，来提高组件的性能和用户体验。`myTransfer`资源为此提供了一个可行的...
vue Element ui实现table列拖动效果
11-07
Element UI 是基于 Vue 的一套组件库，提供了丰富的界面元素，包括表格（Table）等，帮助开发者快速构建用户界面。在实际开发中，我们常常会遇到需要自定义交互效果的需求，比如使表格的列可以拖动调整顺序。本篇...
Element Input组件分析小结
12-10
input组件相对来说复杂一点，我们先从它用到的一个工具库calcTextareaHeight.js进行分析。 calcTextareaHeight.js calcTextareaHeight.js使用来计算文本框的高度的，我们根据代码顺序从上往下进行分析。 HIDDEN_STYLE HIDDEN_STYLE是一个常量，存储隐藏时候的css样式的。 const HIDDEN_STYLE = ` height:0 !important; visibility:hidden !important; overflow:hidden !important; position:absolu
vue3.0 + element Plus实现穿梭框（el-transfer）
m0_52761651的博客
09-28 4532
vue3.0 + element UI实现穿梭框（el-transfer）
关于如何使用ElementUI的table组件来实现自定义穿梭框的效果
qq_40614207的博客
07-10 3408
话不多说，先上图 以上就是基于ElementUI的table组件实现的穿梭框效果，可以选中左右任意的列进行添加和移除，那么是如何实现的呢？我们也直接上代码吧！ //html: <template> <div class="jldlist"> <el-col :span="10"> <el-table :data="de...
Element ui 穿梭框（1）改造之--分页封装组件
ddsuuny的博客
04-25 6475
el-transfer 穿梭框左侧数据太多数据比较多时，不能进行分页，决定自己封装一个！ 1.效果图： 2.注意： 组件中： 2.1 可通过 父组件传值（titles）修改穿梭框左边和右边的标题，形式为数组[],左侧为第一个值，右侧为第二个值； 2.2import { listUser } from "@/api/system/user"; 为接口地址； 2.3 transfer-page.vue 的data 中 defaultProps: {...
自定义穿梭框实现详解 table 穿梭框
Sandy_zhi的博客
03-03 5037
业精于勤 荒于嬉 需求： element 的 穿梭框el-transfer 使用起来样式很受限制，一般我们需要根据自己的需求实现数据的灵活选择，左右穿梭，就需要用到自定义的穿梭框了 思路： 封装自定义的穿梭框，要考虑的是自己的需求样式，以及数据展示格式 A：什么样式？ Q：穿梭框样式，一般分为左右两侧，此处不多说，根据自己的 UI 画页面就可以了 A：展示的数据格式？ Q : 主要是根据自己的页面展示，分析自己需要的是什么样的数据， A : 其他逻辑功能分析？ Q：你需求的穿梭框需..
vue+elementUI实现树形穿梭框
大兵的猫
03-20 2166
思路二：利用elementUI的filter API对选中节点进行筛选，左侧筛选出未选中的，右侧筛选出选中的，用的还是同一棵树，用一个属性来区分是否选择，好处是子节点选中，父节点会跟随保存，不用重新构建树结构。将左侧选中的节点移动到右侧，还要保持树结构，意味着移动子节点，需要把该子节点对应的父节点甚至父节点的父节点一并移到右侧形成一个新的树结构，树结构的层级和原来的树保持一致，只是右侧展示的子节点为选中的子节点，filter API用法。
【Vue3 + Element-Plus】TreeTransfer树形穿梭框组件
Komorebi_00的博客
04-14 2775
树形穿梭框
教你从零写vue穿梭框
qq_39055970的博客
04-02 5256
教你从零写vue穿梭框1. 前言2. 制作选择组件（select-input）2. 制作vue穿梭框组件（table-transfer）4. 将选择组件和穿梭框组件结合使用4.1 点击选择组件按钮，弹出穿梭框4.2 将select-input组件中的数据显示在弹框中的已选表格中4.2.1 全局引入lodash4.2.2 初始化input-select组件list数据和穿梭框的selectList（已选中的人员）4.3 将重新选择后的表格数据显示在select-input组件中4.3 单选模式5. 完整代码：
vue+element表格删除功能
05-13
要实现Vue和Element UI表格的删除功能，你需要做以下几步： 1. 在Vue组件中定义表格数据和列的属性，以及删除方法： ``` 姓名"> 年龄"> 操作"> (scope.$index)">删除 export default { data() ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值