<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
el-tree和 el-table实现穿梭复制功能
最新推荐文章于 2024-03-27 15:34:49 发布
本文介绍了如何利用JavaScript和Vue.js的Element UI组件库中的el-tree和el-table,实现前端数据的穿梭复制功能。通过el-tree展示源数据,结合el-table完成目标数据的选择和同步,实现高效便捷的数据操作界面。
摘要由CSDN通过智能技术生成