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