基於element-ui和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，后續發現再修改