select-table 下拉表格

hos-biz-select-table组件由hos-select、hos-biz-table两个组件构成。

基本用法

hos-biz-select-table接收两个必传参数table-uid和table-data，hos-biz-table支持的其他属性也在此设置。

table-uid 为下拉表格的唯一标识。 table-data 为表格的数据，格式可以为api配置字符串、数组和 Function。

使用说明和示例

<hos-biz-select-table
    v-model="form.personId"
    :valueConfig="valueConfig"
    clearable
    filterable
    placeholder="请选择负责人"
    :cols="cols"
    :table-data="selectPersonPage"
    :page="true"
    tableUid="selectPersonTable"
    :form="form"
    :row-class-name="tableRowClassName"
>
</hos-biz-select-table>

form: {
    model: {
        //查询条件,用于反显,根据api设置相应参数
        id: "",
        search: "",
    },
},
valueConfig: {
    label: "name",
    value: "id",
},
cols: [
    {
        prop: "personId",
        label: '唯一标识',
    },
    {
        prop: "name",
        label: '姓名',
    },
],
selectPersonPage(params) {
    return this.$api("api.searchPage", params);
},

反显

请服务端提供相应的模糊查询方式，一般同显示下拉表格一致,即上述selectPersonPage(params)函数支持分页模糊查询。

禁用

传入row-class-name,禁用类需要自定义实现。例：

:row-class-name="tableRowClassName"
tableRowClassName({ row }) {
    if (!row.activity) {
        return "table-row-not-select";
    }
},

<style lang="scss">
.table-row-not-select {
    color: #ccc;
    pointer-events: none;
    cursor: not-allowed;
}
</style>

属性和方法

默认继承 hos-biz-table 和 hos-select 所有属性和方法。
详细使用方式请参考 hos-biz-table (opens new window) 和 hos-select (opens new window)。