欢迎光临
我的个人博客网站

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

功能介绍:

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

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

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

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

全局注册穿梭框组件

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,后续发现再修改

赞(0) 打赏
未经允许不得转载:张拓的天空 » 基于element-ui和vuejs的表格式穿梭框组件
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏