0.0.4 • Published 3 years ago
vue3-t-style-table v0.0.4
vue3-t-style-table
介绍
股票期权交易T型报价表格组件
Demo: https://www.zhtao.work/vue3-ts-table
软件架构
基于vue3，BetterScroll2.x版本编写的T型报价表格组件
特点
1、认沽和认购可对称滚动
2、基于优秀的第三方滚动插件编写
3、适用于PC和移动端
4、样式高度可定制
安装教程
npm i vue3-t-style-table
or
yarn add vue3-t-style-table
import TsTable from 'vue3-t-style-table'
const app = createApp(App)
app.use(TsTable)t-style-table
| 名称 | 类型 | 必选 | 描述 |
|---|---|---|---|
| halfWidth | String, Number | 否 | 左右板块宽度，默认375 |
| headerHeight | String, Number | 否 | 表格header高度，默认40 |
| bodyHeight | String, Number | 否 | 表格body高度，默认500 |
| bodyItemHeight | String, Number | 否 | 表格body row item 高度，默认40 |
| headerClass | String | 否 | 表格头部class名称 |
| selectedColor | String | 否 | 表格行点击选择背景色 |
t-style-table-left、t-style-table-center、t-style-table-right（子元素必须为t-style-table-column才能被正确渲染出来，其他的元素不会被渲染出来）
| 名称 | 类型 | 必选 | 描述 |
|---|---|---|---|
| data | Array | 否 | 数据 |
t-style-table-column
| 名称 | 类型 | 必选 | 描述 |
|---|---|---|---|
| prop | String | 否 | 数据字段key |
| label | String | 否 | 表格header表头名称 |
| width | String | 否 | 表格header表宽度 |
t-style-table-column slot
| 名称 | 说明 |
|---|---|
| ——(default) | 自定义列的内容. 参数为 { row, $index } |
| header | 自定义表头的内容. 参数为 { prop, label, width } |
使用示例
<t-style-table style="margin: 0 auto; margin-top: 20px" @row-click="rowClick">
<t-style-table-left :data="data.left">
<template v-for="i in 15" :key="i">
<t-style-table-column prop="price" width="100">
<template #default="scope">
<div :style="{ color: scope.row.price > 0 ? '#f00' : '#0f0' }">
{{ scope.row.price }}
</div>
</template>
<template #header>
<div style="background:#000;color:#fff">
自定义{{ 15 - i + 1 }}
</div>
</template>
</t-style-table-column>
</template>
</t-style-table-left>
<t-style-table-center :data="data.center">
<t-style-table-column prop="price" label="执行价" width="100">
</t-style-table-column>
</t-style-table-center>
<t-styles-table-right :data="data.right">
<template v-for="i in 15" :key="i">
<t-style-table-column prop="price" :label="'价格' + i" width="100">
<template #header>
<div style="background:#00d;color:#fff">自定义{{ i }}</div>
</template>
</t-style-table-column>
</template>
</t-styles-table-right>
</t-style-table>
let left = []
let center = []
let right = []
for (let index = 0; index < 20; index++) {
left.push({ price: 19.23 })
center.push({ price: 18.58 })
right.push({ price: 19.45 })
}
data = {
left = left,
center = center,
right = right
}
const rowClick = (e) => {
console.log(e.row)
console.log(e.index)
}