vue 利用element的Table 表格实现自制的穿梭框（可以高度自定义）

1.
先看效果图：

2.
其实可以从最后的效果图看出这个自制的穿梭框，只是由两个table表格和两个按钮组成，只需要写其中逻辑事件即可完成穿梭框的效果，其中的事件主要分为“选中”，“穿梭”和“删除”，其实也只是关于数组的增，删，改，查这些基本操作。这篇博文主要参考了这位博主的文章：添加链接描述，看不懂我的博文可以到这位博主的文章下去看看，具体代码如下：

首先是左边的框框：
HTML:

<!-- 左边框框 --><div class="transferbox"><div class="topbox"><span style="color:#1E90FF;font-size:16px;font-weight: 550;">待选设备</span></div><div class="level searchbox"><el-input v-model="input" placeholder="请输入内容" style="width:300px" /><el-button type="primary" style="margin:0 0 0 20px">搜索</el-button></div><el-tableref="multipleTable":data="currentPageData"highlight-current-rowtooltip-effect="dark"height="460"style="width: 100%;height:460px;cursor:pointer;":row-style="setColor"@current-change="lineClick"><el-table-columnlabel="日期"width="430"><template slot-scope="scope">{{ scope.row.date }}</template></el-table-column></el-table>

其中要重点注意:row-style="setColor"和@current-change=“lineClick”，这两个触发的事件分别是：选中改变颜色和选中点击的选项的数据。

中间的两个按钮：
HTML:

<!-- 中间按钮 --><div class="vertical center3 centrebtn"><el-button type="primary" icon="el-icon-arrow-right" @click="singleSel()" /><el-button type="primary" style="margin:20px 0 0 0" icon="el-icon-d-arrow-right" @click="mutiSel()" /></div>

右边的框框：
HTML:

 <!-- 右边框框 --><div class="transferbox"><div class="topbox"><span style="color:#1E90FF;font-size:16px;font-weight: 550;">已选设备</span></div><el-tableref="multipleTable":data="yxData"tooltip-effect="dark"height="500"style="width: 100%;height:500px;cursor:pointer;"><el-table-columnlabel="日期"width="360"><template slot-scope="scope">{{ scope.row.date }}</template></el-table-column><el-table-column label="操作" width="70"><template slot-scope="scope"><div><span class="look" style="color: #FF0000" title @click="deletedetails(scope.row)">删除</span></div></template></el-table-column></el-table></div>

3.
接下来是触发的相应的各个事件：

   // 选中lineClick(val) {console.log(val)this.currentRowData = val},// 单选singleSel() {if (this.currentRowData !== null) {if (JSON.stringify(this.yxData).indexOf(JSON.stringify(this.currentRowData)) === -1) {this.yxData.push(this.currentRowData)}}},// 选择整个页面mutiSel() {if (this.currentRowData !== null) {this.currentPageData.forEach((item, index) => {if (JSON.stringify(this.yxData).indexOf(JSON.stringify(item)) === -1) {this.yxData.push(item)this.setColor(item, index)}})}},// 删除deletedetails(row) {if (JSON.stringify(this.yxData).indexOf(JSON.stringify(row)) !== -1) {var index = this.yxData.indexOf(row)this.yxData.splice(index, 1)}},// 选中之后设置颜色setColor({ row, rowIndex }) {if (JSON.stringify(this.yxData).indexOf(JSON.stringify(row)) !== -1) {return {color: 'red'}}}

4.
最后附上完整代码：


<template><div><div><div class="level"><!-- 左边框框 --><div class="transferbox"><div class="topbox"><span style="color:#1E90FF;font-size:16px;font-weight: 550;">待选设备</span></div><div class="level searchbox"><el-input v-model="input" placeholder="请输入内容" style="width:300px" /><el-button type="primary" style="margin:0 0 0 20px">搜索</el-button></div><el-tableref="multipleTable":data="currentPageData"highlight-current-rowtooltip-effect="dark"height="460"style="width: 100%;height:460px;cursor:pointer;":row-style="setColor"@current-change="lineClick"><el-table-columnlabel="日期"width="430"><template slot-scope="scope">{{ scope.row.date }}</template></el-table-column></el-table><!-- 分页 --><el-pagination:current-page="listForm.currentPage":page-sizes="[5,10,25,50,100,200]":page-size="listForm.pageSize"layout="total, sizes, prev, pager, next, jumper":total="totalSize"style="margin-bottom:10px;margin-top:16px"@size-change="handleSizeChange"@current-change="handleCurrentChange"/></div><!-- 中间按钮 --><div class="vertical center3 centrebtn"><el-button type="primary" icon="el-icon-arrow-right" @click="singleSel()" /><el-button type="primary" style="margin:20px 0 0 0" icon="el-icon-d-arrow-right" @click="mutiSel()" /></div><!-- 右边框框 --><div class="transferbox"><div class="topbox"><span style="color:#1E90FF;font-size:16px;font-weight: 550;">已选设备</span></div><el-tableref="multipleTable":data="yxData"tooltip-effect="dark"height="500"style="width: 100%;height:500px;cursor:pointer;"><el-table-columnlabel="日期"width="360"><template slot-scope="scope">{{ scope.row.date }}</template></el-table-column><el-table-column label="操作" width="70"><template slot-scope="scope"><div><span class="look" style="color:   #FF0000" title @click="deletedetails(scope.row)">删除</span></div></template></el-table-column></el-table></div></div><div class="dialog-btn"><el-button>取消</el-button><el-button type="primary">确定</el-button></div></div></div>
</template><script>
export default {data() {return {// 分页listForm: {name: '',type: '',currentPage: 1,pageSize: 25,placeName: '',eui: ''},totalSize: 0,input: '',currentPageData: [{date: '2016-05-03'}, {date: '2016-05-02'}, {date: '2016-05-04'}, {date: '2016-05-01'}, {date: '2016-05-04'}, {date: '2016-05-01'}],multipleSelection: [],currentRowData: null,yxData: []}},// 生命周期 - 挂载完成（可以访问DOM元素）mounted() {},methods: {// 页容量改变handleSizeChange(val) {console.log(val)this.listForm.pageSize = valthis.deviceList()},// 改变当前页handleCurrentChange(val) {console.log(val)this.listForm.currentPage = valthis.deviceList()},// 选中lineClick(val) {console.log(val)this.currentRowData = val},// 单选singleSel() {if (this.currentRowData !== null) {if (JSON.stringify(this.yxData).indexOf(JSON.stringify(this.currentRowData)) === -1) {this.yxData.push(this.currentRowData)}}},// 选择整个页面mutiSel() {if (this.currentRowData !== null) {this.currentPageData.forEach((item, index) => {if (JSON.stringify(this.yxData).indexOf(JSON.stringify(item)) === -1) {this.yxData.push(item)this.setColor(item, index)}})}},// 删除deletedetails(row) {if (JSON.stringify(this.yxData).indexOf(JSON.stringify(row)) !== -1) {var index = this.yxData.indexOf(row)this.yxData.splice(index, 1)}},// 选中之后设置颜色setColor({ row, rowIndex }) {if (JSON.stringify(this.yxData).indexOf(JSON.stringify(row)) !== -1) {return {color: 'red'}}}}
}</script><style lang="scss" scoped>.transferbox{height: 600px;width: 36%;//右边盒子的宽占比border: 3px solid  #009cde;.topbox{margin: 10px 10px;}.searchbox{margin: 0 0 0 10px;}}.centrebtn{width: 80px;height: 600px;margin: 0 10px 0 10px;background-color: #009cde;background-image: radial-gradient(circle farthest-side at left bottom,#009cde,#004687c7 125%);color: #ffff;}/* 水平居中 */.center1{display: flex;justify-content: center;}/* 垂直居中 */.center2{display: flex;align-items: center;}/* 垂直水平居中 */.center3{display: flex;align-items: center;justify-content: center;}/* 水平布局 */.level{display: flex;flex-direction: row;}// 垂直布局.vertical{display: flex;flex-direction: column;}
</style>

最后的样式可以自行修改，当然记得先在main.js中引入element这个框架，不然其中的组件是用不了的。

vue 利用element的Table 表格实现自制的穿梭框（可以高度自定义）相关推荐

ant design vue利用rowClassName给table添加行样式
ant design vue利用rowClassName给table添加行样式目录 1. 需求:表格每行数据hasVerdict值不为'1'时标红显示 2. 实现方式:table属性rowClass ...
Element UI Table表格样式调整
调整Element UI Table表格的样式最终效果: 单元格合并,样式调整模拟后端返回数据 {teamName: '小组一',outsourceFlag: '是',adminName: '张三 ...
element ui Table表格数据筛选功能实现
先来看看实现效果 element ui Table表格数据筛选功能实现查看Element官网关于筛选的实例. 在列中设置filters filter-method属性即可开启该列的筛选,filte ...
解决element的Table表格组件的高度问题( height只能是数字或者字符串 ),实现height: calc(100vh - 260px) 的效果
注:也可直接将el-table的height属性绑定为字符串:calc(100vh - 260px) 实现为同样的效果, 260 是顶部和底部导航以及部分自定义布局 :例: <template& ...
Element：Table表格在单元格内放多个数据
在练习时候用Element的Tab表格的时候,需要在表头下的单元格内把数组的图片和名字放在同一格 (改好才发现挺憨的,这么一个简单的错误..) 但是在使用el的Tab表格时候,在<el-tabl ...
element ui table表格轮播
element ui 用table表格示例不用添加任何语法,配上我下方的方法就没可以轻松实现表格轮播效果: 这个方法放在methods()方法里然后在mounted()中调用就可以了,注意我方法里ri ...
element组件table表格/form表单显示弹窗的三种方式
element组件table表格显示弹窗的两种方式 <el-table-columnlabel="地址"prop="Address"min-width=& ...
设置element ui table表格线条颜色以及设置圆角/解决element ui table设置圆角后线条不显示或显示模糊问题，亲测有效
问题描述 table表格设置为圆角后并且设置table border颜色,设置圆角后导致修改颜色后的border无法显示问题解决 /* 设置圆角以及边框颜色 */.el-table{border-r ...
element UI (table表格)
table 左对齐 <el-table:header-cell-style="{'text-align':'left'}":cell-style="{'text-a ...

vue 利用element的Table 表格实现自制的穿梭框（可以高度自定义）

vue 利用element的Table 表格实现自制的穿梭框（可以高度自定义）相关推荐

最新文章

热门文章