CalmHarbin

# BiuSelectTable 表格选择

# 单选

  • 使用columns来配置表格展示的列，用法同BiuTable组件
  • 通过传入table-data来控制展示的表格内容，使用v-model来绑定选中的值
  • 如果你需要分页，请传入pagination，用法同BiuTable组件
  • 一般情况下，你需要控制选中时显示的字段，数据绑定的字段。你可以通过prop来配置。id为绑定的字段，label为显示的字段
<template>
    <biu-select-table
        v-model="customValue"
        :columns="columns"
        :table-data="tableData"
        :loading="loading"
        :pagination.sync="pagination"
        :prop="{ id: 'id', label: 'clientName' }"
        @search="(text) => getList(text, true)"
        @pagination="() => getList('', false)"
    ></biu-select-table>
</template>

<script lang="tsx">
import { Vue, Component } from 'vue-property-decorator'
import { paginationType } from 'calm-harbin/types/biu-page'
import { tableColumnType } from 'calm-harbin/types/biu-table'

@Component
export default class BiuSelectTableDemo extends Vue {
    customValue = ''

    pagination: paginationType = {
        page: 1,
        size: 20,
        total: 0
    }

    tableData: any[] = []

    loading = false

    get columns(): tableColumnType[] {
        return [
            {
                label: '客户编码',
                id: 'clientCode',
                width: 200
            },
            {
                label: '客户名称',
                id: 'clientName'
            },
            {
                label: '所属机构',
                id: 'companyName'
            }
        ]
    }

    created() {
        this.add(10)
    }

    /**
     * 添加数据
     */
    add(num: number) {
        this.loading = true
        const length = this.tableData.length

        setTimeout(() => {
            new Array(num).fill('').forEach((_item, index) => {
                this.tableData.push({
                    id: index + 1,
                    clientCode: `${length + index}`,
                    clientName: `客户${index}`,
                    companyName: '机构名称'
                })
            })
            this.loading = false
        }, 1000)
    }

    /**
     * 这里可以通过接口查询数据
     * @param { string } text 搜索的文本
     * @param { boolean } clear 是否重置分页
     */
    getList(text: string, clear: boolean) {
        if (clear) {
            this.pagination.page = 1
        }
        console.log(text)
        // 这里可以请求接口...改变tableData达到搜索效果
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
显示代码

# 多选

  • 多选时v-model需要绑定一个数组。
<template>
    <biu-select-table
        v-model="customValue"
        :columns="columns"
        :table-data="tableData"
        :loading="loading"
        multiple
        :pagination.sync="pagination"
        :prop="{ id: 'id', label: 'clientName' }"
        @search="(text) => getList(text, true)"
        @pagination="() => getList('', false)"
    ></biu-select-table>
</template>

<script lang="tsx">
import { Vue, Component } from 'vue-property-decorator'
import { paginationType } from 'calm-harbin/types/biu-page'
import { tableColumnType } from 'calm-harbin/types/biu-table'

@Component
export default class BiuSelectTableMultiple extends Vue {
    customValue = []

    pagination: paginationType = {
        page: 1,
        size: 20,
        total: 0
    }

    tableData: any[] = []

    loading = false

    get columns(): tableColumnType[] {
        return [
            {
                label: '客户编码',
                id: 'clientCode',
                width: 200
            },
            {
                label: '客户名称',
                id: 'clientName'
            },
            {
                label: '所属机构',
                id: 'companyName'
            }
        ]
    }

    created() {
        this.add(10)
    }

    /**
     * 添加数据
     */
    add(num: number) {
        this.loading = true
        const length = this.tableData.length

        setTimeout(() => {
            new Array(num).fill('').forEach((_item, index) => {
                this.tableData.push({
                    id: index + 1,
                    clientCode: `${length + index}`,
                    clientName: `客户${index}`,
                    companyName: '机构名称'
                })
            })
            this.loading = false
        }, 1000)
    }

    /**
     * 这里可以通过接口查询数据
     * @param { string } text 搜索的文本
     * @param { boolean } clear 是否重置分页
     */
    getList(text: string, clear: boolean) {
        if (clear) {
            this.pagination.page = 1
        }
        console.log(text)
        // 这里可以请求接口...改变tableData达到搜索效果
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
显示代码

# 可输入

  • 使用inputable可以达到像输入框一样任意输入内容。

警告

开启inputable只能是单选

<template>
    <div>
        <biu-select-table
            v-model="customValue"
            :columns="columns"
            :table-data="tableData"
            :loading="loading"
            inputable
            :pagination.sync="pagination"
            :prop="{ id: 'id', label: 'clientName' }"
            @search="(text) => getList(text, true)"
            @pagination="() => getList('', false)"
        ></biu-select-table>
        <p style="font-size: 13px">tip：试着输入内容然后失焦看看</p>
    </div>
</template>

<script lang="tsx">
import { Vue, Component } from 'vue-property-decorator'
import { paginationType } from 'calm-harbin/types/biu-page'
import { tableColumnType } from 'calm-harbin/types/biu-table'

@Component
export default class BiuSelectTableInputable extends Vue {
    customValue = ''

    pagination: paginationType = {
        page: 1,
        size: 20,
        total: 0
    }

    tableData: any[] = []

    loading = false

    get columns(): tableColumnType[] {
        return [
            {
                label: '客户编码',
                id: 'clientCode',
                width: 200
            },
            {
                label: '客户名称',
                id: 'clientName'
            },
            {
                label: '所属机构',
                id: 'companyName'
            }
        ]
    }

    created() {
        this.add(10)
    }

    /**
     * 添加数据
     */
    add(num: number) {
        this.loading = true
        const length = this.tableData.length

        setTimeout(() => {
            new Array(num).fill('').forEach((_item, index) => {
                this.tableData.push({
                    id: index + 1,
                    clientCode: `${length + index}`,
                    clientName: `客户${index}`,
                    companyName: '机构名称'
                })
            })
            this.loading = false
        }, 1000)
    }

    /**
     * 这里可以通过接口查询数据
     * @param { string } text 搜索的文本
     * @param { boolean } clear 是否重置分页
     */
    getList(text: string, clear: boolean) {
        if (clear) {
            this.pagination.page = 1
        }
        console.log(text)
        // 这里可以请求接口...改变tableData达到搜索效果
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
显示代码
参数 说明 必填 类型 默认值
table-data 表格显示的数据 objType[] —
columns 表格显示的列 tableColumnType[] false
prop 字段配置 { id: string; label: string } —
value / v-model 绑定值 string | string[] —
placeholder 提示语 string —
multiple 是否为多选 boolean false
disabled 是否禁用 boolean false
inputable 是否为可输入模式，开启后多选无效 boolean false

# 事件

事件名 说明 类型
change 改变事件 (label: string, value: string | string[], tableData: objType[], prop: { id: string; label: string }) => void
pagination 分页改变事件 (data: { page: number, limit: number}) => void

← BiuForm 表单 →