用户组角色绑定（原生 element-plus-ui 表格）

<template>    <div class="common-layout">        <el-container>            <el-header height="180">                <div class="left-panel">                    <el-button type="success">权限查询</el-button>                </div>            </el-header>            <el-main>                <el-table :data="tableData">                    <el-table-column v-for="(column, index) in groupColumns" :key="index" :prop="column.prop" :label="column.label">                        <template #default v-if="column.label === '操作'">                            <el-button link type="primary" size="small" @click="handleClick">绑定</el-button>                        </template>                    </el-table-column>                </el-table>
                <el-dialog v-model="dialogFormVisible" title="用户组角色绑定" :width="590">                    <el-transfer                        v-model="value"                        filterable                        :filter-method="filterMethod"                        filter-placeholder="支持首字母筛选"                        :titles="['未绑定', '已绑定']"                        :data="data"                    />
                    <template #footer>                        <div class="dialog-footer">                            <el-button @click="dialogFormVisible = false">取消</el-button>                            <el-button type="primary" @click="save">保存</el-button>                        </div>                    </template>                </el-dialog>            </el-main>
            <!-- 分页 -->            <el-footer>                <el-pagination                    v-model:currentPage="currentPage"                    v-model:page-size="pageSize"                    :page-sizes="[20, 50, 100, 200]"                    :small="small"                    :disabled="disabled"                    :background="background"                    :total="tableData.length"                    layout="total, sizes, prev, pager, next, jumper"                    @size-change="handleSizeChange"                    @current-change="handleCurrentChange"                />            </el-footer>        </el-container>    </div></template>
<script lang="ts" setup>import { reactive, ref } from '@vue/reactivity'import { ElMessage } from 'element-plus'
const dialogFormVisible = ref(false)
const handleClick = () => {    dialogFormVisible.value = true}
const save = () => {    console.log('save', value.value)    ElMessage.success('保存成功')    dialogFormVisible.value = false}
const groupColumns = reactive([    { prop: 'GroupId', label: '用户组ID', show: true },    { prop: 'GroupName', label: '用户组名', show: true },    { prop: 'Roles', label: '角色', show: true },    { prop: 'CreatedUser', label: '创建人', show: true },    { prop: 'CreatedTime', label: '创建时间', show: true },    { prop: 'UpdatedUser', label: '最后修改人', show: true },    { prop: 'UpdatedTime', label: '最后修改时间', show: true },    { fixed: 'right', label: '操作', show: true },])
const tableData = [    {        GroupId: 'group-cgz-01',        GroupName: '仓管组',        Roles: '北京仓管角色、天津仓管角色',        CreatedUser: 'SH1943',        CreatedTime: '2022-01-05  11:25:41',        UpdatedUser: '周杰伦',        UpdatedTime: '2022-07-15 16:01:23',    },    {        GroupId: 'group-swzlz-02',        GroupName: '商务助理组',        Roles: '商务助理角色',        CreatedUser: '乔克叔叔',        CreatedTime: '2022-01-05  11:25:41',        UpdatedUser: '公公偏头痛',        UpdatedTime: '2022-07-15 16:01:23',    },]
//Role Binding Transferinterface Option {    key: number    label: string    initial: string}
const generateData = () => {    const data: Option[] = []    const states = ['仓库管理员', '商务助理',"商务总监","财务总监"]
    //首字母检索    const initials = ['ckgly', 'swzl','suzj','cuzj']
    states.forEach((role, index) => {        data.push({            label: role,            key: index,            initial: initials[index],        })    })    return data}
const data = ref<Option[]>(generateData())const value = ref([])
const filterMethod = (query: string, item: any) => {    return item.initial.toLowerCase().includes(query.toLowerCase())}
//#region  分页
const currentPage = ref(1)const pageSize = ref(50)const small = ref(false)const background = ref(false)const disabled = ref(false)
const handleSizeChange = (val: number) => {    console.log(`${val} items per page`)}const handleCurrentChange = (val: number) => {    console.log(`current page: ${val}`)}//#endregion</script>
<style>.common-layout {    background-color: white;    width: 100%;    height: calc(100vh - 60px);}.el-header {    margin-top: 10px;}
.el-footer {    background-color: white;    position: fixed;    align-items: center;    bottom: 0;    width: 100%;    height: 60px;    display: flex;}</style>