简介

下拉表格，可搭配mb-editor-table（可编辑表格）使用，也可以单独使用

单独使用

<mb-select-table
    v-model="multipleSelect"
    :height="400"
    :width="800"
    multiple
    v-bind="selectTableOptions"
    @select-data="multipleCallback"
/>

const multipleSelect = ref()
const selectTableOptions = reactive({
    tableOptions: {
        id: 'user-list',
        url: '/system/user/list',
        where: {
            username: {
                label: '登录名称',
                props: {
                    width: '80px'
                }
            }
        },
        page: true,
        cols: [
            {
                field: 'username',
                label: '登录名称',
                realSort: true
            },
            {
                field: 'name',
                label: '姓名/昵称'
            },
            {
                field: 'officeName',
                label: '所属机构'
            },
            {
                field: 'roles',
                label: '角色',
                type: 'dynamic'
            },
            {
                field: 'phone',
                label: '手机号'
            },
            {
                field: 'createDate',
                label: '创建时间',
                width: 180
            }
        ]
    }
})

可编辑表格内使用

<mb-editor-table ref="dataTableRef" v-bind="dataTableOptions" />

const dataTableRef = ref()
watch(dataTableRef, () => {
    dataTableRef.value.setData([{
        username: '',
        id: '1',
        roleId: '1d183eaec667423fa9adb20e24356a86',
        officeId: '',
        isLogin: 0,
        xxx: 0
    }])
})
const dataTableOptions = reactive({
    props: {
        url: '/system/user/list',
        where: {
            username: 'admin'
        }
    },
    showNo: false,
    operation: {
        delete: {
            confirm: true,
            deleteAfter() {
                console.log('已删除')
            }
        },
        sub: true,
        same: true
    },
    operationWidth: 300,
    cols: [{
        field: 'username',
        label: '登录名称',
        component: 'select-table',
        // alwaysEdit: true,
        componentProps: {
            height: 400,
            width: 800,
            multiple: true,
            onSelectData({ selectData, multiple, editorCurrentRow }){
                if(multiple){
                    selectData.forEach((it, i) => {
                        if(i == 0){
                            Object.assign(editorCurrentRow, it)
                        }else{
                            dataTableRef.value.unshift(it)
                        }
                    })
                }else{
                    editorCurrentRow.officeId = selectData.officeId
                    editorCurrentRow.username = selectData.username
                }
            },
            tableOptions: {
                id: 'user-list',
                url: '/system/user/list',
                page: true,
                selection: false,
                where: {
                    username: {
                        label: '登录名称',
                        props: {
                            width: '80px'
                        }
                    }
                },
                cols: [
                    {
                        field: 'username',
                        label: '登录名称',
                        realSort: true
                    },
                    {
                        field: 'name',
                        label: '姓名/昵称'
                    },
                    {
                        field: 'officeName',
                        label: '所属机构'
                    },
                    {
                        field: 'roles',
                        label: '角色',
                        type: 'dynamic'
                    },
                    {
                        field: 'phone',
                        label: '手机号'
                    },
                    {
                        field: 'createDate',
                        label: '创建时间',
                        width: 180
                    }
                ]
            }
        },
        copyAll: true,
        copyText: true
    },{
        field: 'officeId',
        label: '组织机构',
        component: 'tree-select',
        componentProps: {
            url: "/system/user/offices",
            placeholder: "请选择组织机构",
            multiple: true
        },
        copyAll: true,
        copyText: true
    }]
})

直接搜索（可配置搜索字段、静态数据搜索），不分页

<mb-select-table
    v-model="staticSearchValue"
    :height="400"
    :width="800"
    multiple
    :table-options="staticSelectTableOptions"
    :search="staticSearchOptions"
    @select-data="staticSearchCallback"
/>

const staticSearchValue = ref()
const staticSelectTableOptions = reactive({
    id: 'user-list',
    url: '/system/user/list',
    where: { size: 999999 },
    page: false,
    cols: [
        {
            field: 'username',
            label: '登录名称',
            realSort: true
        },
        {
            field: 'name',
            label: '姓名/昵称'
        },
        {
            field: 'officeName',
            label: '所属机构'
        },
        {
            field: 'roles',
            label: '角色',
            type: 'dynamic'
        },
        {
            field: 'phone',
            label: '手机号'
        },
        {
            field: 'createDate',
            label: '创建时间',
            width: 180
        }
    ]
})
function staticSearchCallback({ selectData, multiple }){
    if(multiple){
        staticSearchValue.value = selectData.map(it => it.username).join(' ')
    }else{
        staticSearchValue.value = selectData.username
    }
}
const staticSearchOptions = reactive({
    fields: ['username', 'name'],
    static: true
})

直接搜索（可配置搜索字段、接口数据搜索）

<mb-select-table
    v-model="searchValue"
    :height="400"
    :width="800"
    multiple
    :table-options="sourceTableOptions"
    :search="searchOptions"
    @select-data="searchCallback"
/>

const searchValue = ref()
const sourceTableOptions = reactive({
    id: 'user-list',
    url: '/system/user/list',
    page: true,
    cols: [
        {
            field: 'username',
            label: '登录名称',
            realSort: true
        },
        {
            field: 'name',
            label: '姓名/昵称'
        },
        {
            field: 'officeName',
            label: '所属机构'
        },
        {
            field: 'roles',
            label: '角色',
            type: 'dynamic'
        },
        {
            field: 'phone',
            label: '手机号'
        },
        {
            field: 'createDate',
            label: '创建时间',
            width: 180
        }
    ]
})
const searchOptions = reactive({
    fields: ['username']
})
function searchCallback({ selectData, multiple }){
    if(multiple){
        searchValue.value = selectData.map(it => it.username).join(' ')
    }else{
        searchValue.value = selectData.username
    }
}

select table props

名称	类型	默认值	说明	版本
v-model	String	undefined	下拉表格输入框的值
width	Number	500	表格宽度
height	Number	300	表格高度
tableOptions	Object	undefined	mb-table的props，详见mb-table
onSelectData	({selectData, multiple}) => void	undefined	选择数据后回调
multiple	Boolean	false	是否开启多选
search	Object	undefined	搜索配置，详见search

select table search props

名称	类型	默认值	说明	版本
fields	Array	undefined	要搜索的字段
static	Boolean	false	是否静态数据搜索