el-tree和 el-table实现穿梭复制功能

最新推荐文章于 2024-03-27 15:34:49 发布

weixin_45979310

最新推荐文章于 2024-03-27 15:34:49 发布

阅读量404

点赞数

文章标签： javascript vue.js 前端 elementui

本文链接：https://blog.csdn.net/weixin_45979310/article/details/122467943

版权

本文介绍了如何利用JavaScript和Vue.js的Element UI组件库中的el-tree和el-table，实现前端数据的穿梭复制功能。通过el-tree展示源数据，结合el-table完成目标数据的选择和同步，实现高效便捷的数据操作界面。

摘要由CSDN通过智能技术生成

在这里插入图片描述

<template>
  <div class="signalPop">

    <div class="content">
      <div class="left">
        <div class="top">
          <el-input v-model="inputValue" class="inp" @keyup.enter.native="signalControl" placeholder="请输入关键字">
            <el-button slot="suffix" icon="el-icon-search" @click="signalControl" class="btn"></el-button>
          </el-input>
        </div>
        <el-tree
          class="tree"
          :data="treeList"
          show-checkbox
          node-key="id"
          ref="tree"
          :default-expanded-keys="[1]"
          :props="defaultProps"
          @check="treeChange"
        >
        </el-tree>
      </div>
      <div class="right">
        <div class="top">
          <el-select v-model="selValue" placeholder="历史分组" clearable @clear="clearSel" @change="querySignalDetail"
                     class="sel">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <div class="name">开始时间:</div>
          <el-date-picker
            class="time"
            v-model="timeValue"
            type="datetime"
            placeholder="选择日期时间"
          ></el-date-picker>
        </div>
        <el-table
          :data="tableList"
          class="table"
          height="238"
          :row-style="{ height: '30px' }"
          :cell-style="{ padding: '0px' }"
        >
          <el-table-column label="选中信号灯">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.checked" @change="checkChange(scope.row)">{
   {
    scope.row.label }}
              </el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="灯" width="60" align="center">
            <template slot-scope="scope">
              <el-switch
                class="switchStyle"
                v-model="scope.row.isGreen"
                active-text="绿"
                inactive-text="红"
                active-color="#13ce66"
                inactive-color="#ff4949"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="间隔" width="80" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.time" class="tabInp"/>
              <span>秒</span>
            </template>
          </el-table-column>
          <el-table-column label="时长" width="80" align="center">
            <temp