@sibat-gs/gs-table

table滚动条自定义

Usage no npm install needed!

<script type="module">
  import sibatGsGsTable from 'https://cdn.skypack.dev/@sibat-gs/gs-table';
</script>

README

gs-table

@Date 202102231458 version 1.4.2
fixed: 修复高度字符串相加问题
@Date 202101281634 version 1.4.1
fixed: 修复样式
@Date 202101251733 version 1.4.0
feat: 新增no-data展示
@Date 202001181834 version 1.3.2
fixed: 修复header因为不同浏览器计算小数点加减一像素问题, 把thead都设置固定的整数theadHeight
@Date 09-15 version 1.3.1
# 修复行滑动样式
使用实例
<GsTable class="default-table data-join-table" :colData="colData" :data="results" ref="data-join-table" :height="tableHeight">
    <template v-slot:td-0="{i}">
        {{$getIndex(i, page, pageSize)}}
    </template>
    <template v-slot:td-1="{item}">
        {{item.dataSourceName}}
    </template>
    <template v-slot:td-2="{item}">
        <i :class="['icon-input-type', `icon-input-type-${formatInputType(item.inputType)}`]"></i>
        <span class="input-type">{{item.inputType}}</span>
    </template>
    <template v-slot:td-3="{item}">
        {{item.dataOrigin}}
    </template>
    <template v-slot:td-4="{item}">
        <i :class="['icon-task-status', `icon-task-status-${item.dataSyncTaskStatus}`]"></i>
        <span class="task-status-text">{{$taskStatusToText(item.dataSyncTaskStatus)}}</span>
    </template>
    <template v-slot:td-5="{item}">
        {{item.dataCountOfRecent1Hour}}
    </template>
    <template v-slot:td-6="{item}">
        <span  v-if="item.destTableTagNames && item.destTableTagNames.length" class="dest-tags" :title="item.destTableTagNames.join('; ')">{{item.destTableTagNames.join('; ')}}</span>
        <span  v-else></span>
    </template>
    <template v-slot:td-7="{item}">
        {{item.createTime}}
    </template>
    <template v-slot:td-8="{item, i}">
        <span class="view-btn" @click.stop="handleView(item, i)">查看</span>
    </template>
</GsTable>

// colData
colData: [
    {
        th: '序号',
        width: 100,
        fixed: 'left',
    },
    {
        th: '数据源名称',
        key: 'dataSourceName',
        isSortable: true,
    },
    {
        th: '接入类型',
        key: 'inputType',
        isSortable: true,

    },
    {
        th: '数据来源',
        key: 'dataOrigin',
        isSortable: true,

    },
    {
        th: '任务状态',
        key: 'dataSyncTaskStatus',
        isSortable: true,
    },
    {
        th: '最近1h数据量(万条)',
        key: 'dataCountOfRecent1Hour',
        isSortable: true,
    },
    {
        th: '标签',
        key: 'destTableTagNames',
        isSortable: true,
    },
    {
        th: '创建时间',
        key: 'createTime',
        isSortable: true
    },
    {
        th: '操作',
        width: 100,
        fixed: 'right'
    },
],

props
|name    | 类型    | 是否必须          |   备注            |
|data    | Array   |  是              |    数据           |
|colData | Array   |  是               |   表头列数据定义  |
|height  | Number  |  是               | 表格内容高度      |
|multiple | Boolean | 否                | 是否多选        |

// 事件
// checkChange(checks, checkAll);


update

v1.3.0


修复bug