码迷,mamicode.com
首页 > Web开发 > 详细

基于element-ui和vuejs的表格式穿梭框组件

时间:2020-09-18 01:19:11      阅读:76      评论:0      收藏:0      [点我收藏+]

标签:直接   ima   check   imp   EDA   双击   targe   pre   ali   

功能介绍:

基于element-ui和vuejs的表格式穿梭框组件——可双击穿梭,批量选择穿梭;清空选中项。

技术图片

组件代码-具体代码在git仓库-https://github.com/layaling/formLibs.git中,可直接拉取引入使用

技术图片

全局注册穿梭框组件

import shuttleBox from ‘./main.vue‘
shuttleBox.install = function (Vue) {
  Vue.component(shuttleBox.name, shuttleBox)
}
export default shuttleBox

vue中直接使用

<shuttleTable
      :originShuttleDate="shuttleTableList"
      :ifNeedClear="ifNeedClearFlag"
      :keyValue="keyName"
      :tableHeight="tbHeight"
      :rtWidth="rWidth"
      :ltWidth="lWidth"
      :lTableHeader="lTableHeaderList"
      :rTableHeader="rTableHeaderList"
      :tableShowName="tableShow"
      @change="checkedShuttleDates"
    ></shuttleTable>

对应参数描述

shuttleTableList:,// 表格原始数据,默认值[]
ifNeedClearFlag, // 是否需要清除按钮,默认值false
keyName:, //唯一关键字标志,string
tbHeight: ,// 表格高度
rWidth: ‘‘, // 右侧穿梭框宽度
lWidth: ‘‘, // 左侧穿梭框宽度
lTableHeaderList: [], //穿梭框左侧表头信息
rTableHeaderList: [], // 穿梭框右侧表头信息
tableShow: { // 表格标题显示内容参数替换
        label: ‘label‘
      }
 
可能还有bug,后续发现再修改

基于element-ui和vuejs的表格式穿梭框组件

标签:直接   ima   check   imp   EDA   双击   targe   pre   ali   

原文地址:https://www.cnblogs.com/layaling/p/13667790.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!