功能介紹:
基于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="https://www.cnblogs.com/layaling/p/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,后續發現再修改轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/37722.html
標籤:JavaScript
上一篇:WEB前端第四十二課——瀑布流
