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

el-tree和 el-table实现穿梭复制功能_第1张图片

<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">
            <template slot

你可能感兴趣的:(javascript,vue.js,前端,elementui)