vue3+Element Plus實現自定義穿梭框的詳細代碼

更新時間：2024年01月30日 09:26:11 作者：左小白

找到一個好用的vue樹形穿梭框組件都很難,又不想僅僅因為一個穿梭框在element-ui之外其他重量級插件,本文給大家分享vue3+Element Plus實現自定義穿梭框的示例代碼,感興趣的朋友一起看看吧

先上效果圖：具體細節(jié)可以自己調整這里主要說明派單，取消這兩個按鈕的實現

DOM部分代碼：

    <el-row style="min-height: 7.5rem">
        <el-col :span="10" style="border: 1px solid #E1E1E1;border-radius: 5px">
            <div>
                <div style="border-radius: 5px 5px 0px 0px;
                                                                    border-bottom: 1px solid #42A4ED;display: flex;
                                                                    justify-content: space-around;background: #42A4ED">
                    <div id="rec" style="
                                 font-weight: bolder;
                                                                         cursor: pointer;/*鼠標變成手指樣式*/
                                                                         transition: all 0.3s;
                                                                         color: #fff;">
                        <p style="padding: 10px 10px;height: 40px;"></p>
                    </div>
                </div>
                <div style="padding-bottom: 20px;margin: auto;
                                                                    min-height: 15%;width:80%;font-size: .2rem;
                                                                    color:#0c1a24;background-color: #fff;">
                    <el-row>
                        <el-col :span="20" style="margin-left: 40px; margin-top: 10px;">
                            <el-input :style="{ margin: 'auto', height: '30px'}" v-model.trim="formData.orgName"
                                v-show="flag == 'REC'" placeholder="請輸入組織名稱">
                                <template #append>
                                    <img @click="getUserData()" src="@/assets/images/icon/search.png"
                                        style="position:relative;top:0px;right: 0px;cursor: pointer">
                                </template>
                            </el-input>
                        </el-col>
                    </el-row>
                </div>
                <el-table v-loading="flagTbale" ref="selectedLeft"  align='center' :row-style="{ height: '30px', padding: '0 0' }"
                    highlight-current-row :data="tableData" @selection-change="handleLeftSelectionChange"
                    :cell-style="{ padding: '3px', background: '#fff', paddingLeft: '0', color: '#666' }"
                    :header-cell-style="{ background: '#42A4ED', color: '#FFFFFF', height: '20px', fontSize: '0.2rem', fontWeight: 'bold' }"
                    :header-row-style="{ padding: '10px' }">
                    <el-table-column type="selection" width="50" prop="select"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" align="center" v-for="col in cols" :key="col.id"
                        :label="col.label" :prop="col.prop" :width="col.width">
                    </el-table-column>
                </el-table>
                <div style="height: 1rem;margin-bottom:0.2rem;display: flex; justify-content: center;">
                    <el-pagination class="pagination"  small layout="prev, pager, next" @size-change="handleSizeChange"
                        :pager-count="3" @current-change="handleCurrentChange" v-model:current-page="pageNum"
                        v-model:page-size="pageSize" :total="total"  />
                </div>
            </div>
        </el-col>
        <!-- 中間按鈕 -->
        <!--中間按鈕開始-->
        <el-col :span="2" class="layui-transfer-active" style="margin: 230px 3% 0 5%;">
            <div>
                <el-button class="setting-btn" style="width: 70%;" @click="buttonRight" type="primary"
                    :disabled="fxDisabled">
                    派單
                </el-button>
            </div>
            <div>
                <el-button class="setting-btn mt20" style="width: 70%;" @click="buttonLeft" type="primary"
                    :disabled="qxfxDisabled">取消
                </el-button>
            </div>
        </el-col>
        <el-col :span="10" style="border: 1px solid #E1E1E1;border-radius: 5px">
            <div>
                <div style="border-radius: 5px 5px 0px 0px;
                                                            border-bottom: 0px solid #42A4ED;display: flex;
                                                            justify-content: space-around;background: #42A4ED">
                    <div id="reced" style="font-family: SourceHanSansCN-Medium;
                                                                 font-weight: bolder;
                                                                 cursor: pointer;/*鼠標變成手指樣式*/
                                                                 transition: all 0.3s;
                                                                 color: #fff;">
                        <p style="padding: 1px 0px;height: 4px;"></p>
                    </div>
                </div>
                <el-table ref="selectedRight"  align='center' max-height="470px" :row-style="{ height: '30px', padding: '0 0' }"
                    highlight-current-row :data="sharedData" @selection-change="handleRightSelectionChange"
                    :cell-style="{ padding: '3px', background: '#fff', paddingLeft: '0', color: '#666' }"
                    :header-cell-style="{ background: '#42A4ED', color: '#FFFFFF', height: '20px', fontSize: '0.2rem', fontWeight: 'bold' }"
                    :header-row-style="{ padding: '10px' }"
                    >
                    <el-table-column type="selection" width="55" prop="select"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" align="center" v-for="col in cols" :key="col.id"
                        :label="col.label" :prop="col.prop" :width="col.width">
                    </el-table-column>
                </el-table>
            </div>
        </el-col>
    </el-row>

穿梭框的table表頭是動態(tài)的html中無需修改，使用這個組件首先需要在scripe中創(chuàng)建如下變量

const tableData = ref([]) //左側數據
const selectedLeft = ref([])// 左側選中數據
const sharedData = ref([])//右側數據
const selectedRight = ref([])// 右側選中數據
//表格loading
const flagTbale = ref(false) //可以去除所有的flagTbale 變量即可去除loading功能
//兩個table表頭
const cols = ref([
    { id: 1, prop: 'latnName', label: '本地網' },
    { id: 2, prop: 'orgId', label: '組織編碼' },
    { id: 3, prop: 'orgName', label: '組織' },
])

然后就是最重要的按鈕功能

// 取消按鈕
const buttonLeft = async () => {
    if (!selectedRight.value || !Array.isArray(selectedRight.value)) {
        selectedRight.value = [];
    }
    // 將右側選中的數據移動到左側
    tableData.value = tableData.value.concat(selectedRight.value);
    // 從右側數據中移除已經移動的數據
    sharedData.value = sharedData.value.filter(item => !selectedRight.value.includes(item));
    // 清空右側選中的數據
    selectedRight.value = [];
}
// 分享按鈕
const buttonRight = async () => {
    if (!selectedLeft.value || !Array.isArray(selectedLeft.value)) {
        selectedLeft.value = [];
    }
    // 將左側選中的數據移動到右側
    sharedData.value = sharedData.value.concat(selectedLeft.value);
    // 從左側數據中移除已經移動的數據
    tableData.value = tableData.value.filter(item => !selectedLeft.value.includes(item));
    // 清空左側選中的數據
    selectedLeft.value = [];
}

按鈕禁用邏輯實現

// 按鈕是否禁用
const qxfxDisabled = ref(true)
const fxDisabled = ref(true)
// 左側表格選中事件
const handleLeftSelectionChange = (selection) => {
    if (selection.length !== 0) {
        fxDisabled.value = false
    }
    if (selection.length === 0) {
        fxDisabled.value = true
    }
};
// 右側表格選中事件
const handleRightSelectionChange = (selection) => {
    selectedRight.value = selection;
    if (selection.length !== 0) {
        qxfxDisabled.value = false
    }
    if (selection.length === 0) {
        qxfxDisabled.value = true
    }
};

到這里你就可以使用在這個組件了。這是經過插分的代碼原本還擁有表頭切換的邏輯如有需要可留言.我后續(xù)可以在做整理

到此這篇關于vue3+Element Plus實現自定義穿梭框的文章就介紹到這了,更多相關vue3 Element Plus穿梭框內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: