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)
}