代码改变世界
[登录 · 注册]
  • 基于elementui和vuejs的表格式穿梭框组件
  • 功能介绍:

    基于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,后续发现再修改
  • 【推广】 阿里云小站-上云优惠聚集地(新老客户同享)更有每天限时秒杀!
    【推广】 云服务器低至0.95折 1核2G ECS云服务器8.1元/月
    【推广】 阿里云老用户升级四重礼遇享6.5折限时折扣!
  • 原文:https://www.cnblogs.com/layaling/p/13667790.html
Copyright 2008-2020 晋ICP备12007731号-1