Os UiTable 表格
用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。
基础用法
data 设置表格行数据
columns 设置表格列结构
size属性支持以下选项，不设置默认为default
<script setup>
import { ref } from 'vue'
const columns = ref([
{
key: 'no',
label: '编号',
width: 80
}
// ...
])
const data = ref([
{
no: 9845
// ...
}])
</script>
<os-table
:data="data"
:columns="columns">
</os-table>表格样式
stripe属性能设置是否带斑马纹，可以更容易区分出不同行的数据。
border属性能设置是否边框。
hover属性能设置是否鼠标给过一行时背景变色。
<os-table
:data="data"
:columns="columns"
:stripe="true"
:border="true"
:hover="true">
</os-table>表格选择器
绑定v-model后可自动启用表格选择器。
select-disabled为回调方法，Function(item:row)返回该行数据，如该结果true则该行数据禁止选择，本例子字段no如果包含1，则禁止选择。
select-type可定义该选择器是多选checkbox或单选radio，默认为checkbox
select-key可定义选中的的对应字段内容，如不设置则选中返回该行数据。
selected为每次选择数据后返回方法，函数返回已选择的内容。
<os-table
v-model="selData"
:data="data"
:columns="columns"
max-height="300"
select-type="checkbox"
select-key="no"
:select-disabled="(item) => { return item.no.indexOf(1) >= 0 }">
</os-table>列插槽
可设置插槽名为表格列结构key名称，插槽会暴露出该行的所有数据row, index, col, colIndex
<os-table :data="data" :columns="columns" max-height="300">
<template #update="{ row, index, col, colIndex }">
<b class="os-text-primary">{{ row.update }}</b>
</template>
</os-table>scope暴露数据
{
row: {}, // 该行数据
index: 0, // 该行数组指针
col: {}, // 该列数据
colIndex: 0 // 该列数组指针
}表头插槽
与列插槽使用方法累似，固定插槽名为th，如需要定位到某一列可使用th-作为前缀，如th-no th-name，插槽会暴露出该行的所有数据col, colIndex
<os-table :data="data" :columns="columns" max-height="300">
<template #th="{ col, colIndex}">
<b class="os-text-primary">{{ col.label }}</b>
</template>
<template #th-name="{ col, colIndex}">
<b class="os-text-danger">{{ col.label }}</b>
</template>
</os-table>scope暴露数据
{
col: {}, // 该列结构数据
colIndex: 0 // 该列结构数组指针
}表格排序
可在列数据 columns 配置参数 sort=true 开启列排序功能。
开启的列将展示箭头，可通过点击列表头按顺序切换排序方式，顺序为 desc -> asc -> null
本列仅为展示排序功能，数据排序请结合@sort方法进行排序数据操作。
<script setup>
const data = ref([])
const columns = ref([
{
sort: true // 该列开始排序功能
// ...
}
])
const handleSort = ({ key, order }) {
// key: 对应columns设置key字段, order则为 asc | desc | ''，清除了排序会返回空字符串。
// ...
}
</script>
<os-table :data="data" :columns="columns" max-height="300"
@sort="handleSort">
</os-table>固定列
通过添加columns结构数据字段fixed可设置固定列，属性只支持两个值left right
<script setup>
const columns = ref([
{
fixed: 'left' // 固定在左边
// ...
}
])
</script>
<os-table :data="data" :columns="columns" max-height="300" @sort="handleSort">
</os-table>复杂表头
通过添加columns结构数据字段group可设置子级数据数组，均与父级数据结构相同。
注：复杂表头暂不支持固定列功能。
<script setup>
const columns = ref([
{
group: [ // 子级结构
{
group: [] // 子级结构
// ...
}
]
// ...
}
])
</script>
<os-table :data="data" :columns="columns" max-height="300">
</os-table>树形表格
可通过设置tree-props属性参数字段children字段指定子级数据，表格数据中如有此指定字段，则为存在子级，指定字段为数组格式，子级数据需与父级结构一致。
<script setup>
const data = ref([
{
sub: [ // 子级结构
{
sub: [] // 子级结构
// ...
}
]
// ...
}
])
</script>
<os-table :data="data" :columns="columns"
:tree-props="{ children: 'sub' }"
max-height="300">
</os-table>展开行
expand属性能开启展开行功能
<os-table
:data="data"
:columns="columns"
expand>
</os-table>列拖拽
draggable-column属性设置为True，则会自动启动表头拖拽事件，能自定义列排序（注：目前只支持一级表头进行拖拽，且key必填项需要唯一）。
draggable-columns参数可传入保存列顺序的参数，数组为column中的key字符串数组。
draggable-column-drop方法能返回每次更换列排序后的顺序数组
<os-table
:data="data"
:columns="columns"
draggable-column>
</os-table>