README
dzhyun-table
基于Vue封装, PC端大列表组件 large-list, 小列表组件 small-list, 和static-small-list, 封装滚动业务逻辑, 依赖dzhyunjs获取数据, 必须实现配置好vue插件(例如：dzhyun-vue-data), 即必须有全局this.$dzhyun
安装
$ npm install dzhyun-table -S
使用
在 main.js 文件中引入插件和样式并注册
# main.js
import dzhyunTable from 'dzhyun-table'
import 'dzhyun-table/lib/dzhyun-table.css'
Vue.use(dzhyunTable)
大列表-large-list
props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| focusedOBJ | 初始时的focusedObj | String | |
| cacheDATA | 缓存的复杂数据 | Object | |
| objListCache | 所有页面的排序数组 | Object | |
| fieldsConfig | 请求配置 | Array | |
| theme | 主题配置 | Object | |
| objReqParam | 整体列表的请求参数 | Object | {gql: "block=市场/沪深市场/沪深A股",field: "ZhongWenJianCheng"} |
| desc | 整体列表的默认排序 0 不排序, 1: true正序, 2: false倒序 | Number | 0 |
| orderby | 整体列表的排序字段 | String | ZhangFu |
| fields | 局部列表的展示字段 | Array | ['Obj', 'ZhongWenJianCheng', 'ZhangDie'] |
| showTitle | 是否显示表头 | Boolean | true |
| titleHeight | 表头高度 | Number | 30 |
| showScroller | 是否显示上下滚动条 | Boolean | true |
| contentHeight | 内容高度 | Number | 700 |
| contentWidth | 内容宽度 | Number | 700 |
events
| 事件名 | 说明 | 返回值 |
|---|---|---|
| left-click | 左键单击 | 对应的obj |
| right-click | 右键单击 | 对应的obj |
| dbl-click | 双击 | 对应的obj |
| fieldsConfig-ischange | 新fieldsConfig值 | |
| focused-ischange | 激活的obj | |
| objlist-ischange | 新objlist值 | |
| cachedata-ischange | 新cachedata值 | |
| ##### demo | ||
| ``` | ||
| <large-list | ||
| :showTitle="false" | ||
| :showScroller="false" | ||
| :height=50 | ||
| :theme="theme" | ||
| :fieldsConfig="fieldsConfig" | ||
| @right-click="rightclick" | ||
| @dbl-click="dblclick" | ||
| @left-click="leftclick" | ||
| @fieldsConfigChange="fieldsConfigChange" | ||
| > | ||
| <!-- | ||
| <span | ||
| v-for="(e, i) in fields" | ||
| :key="i" | ||
| :style="{ | ||
| height: slotScopes.itemHeight/2 + 'px', | ||
| lineHeight: slotScopes.itemHeight/2 + 'px', | ||
| backgroundColor: | ||
| slotScopes.focusedObj === slotScopes.data.Obj ? theme.tableContentActiveBgColor: | ||
| theme.tableContentBgColor}" | ||
| >{{slotScopes.data[e] | '--'}} | |
| --> | ||
### 小列表-small-list
##### props
| 属性 | 说明 | 类型 | 默认值 |
| :------: | :----: | :----: | :--: |
| titleAlign | 表头文字居中方式 | String | center |
| objReqParam | 整体列表的请求参数 | Object | {gql: "block=市场/沪深市场/沪深A股",field: "ZhongWenJianCheng"} |
| desc | 整体列表的默认排序 0 不排序, 1: true正序, 2: false倒序 | Number | 0 |
| orderby | 整体列表的排序字段 | String | ZhangFu |
| fields | 局部列表的展示字段 | Array | ['Obj', 'ZhongWenJianCheng', 'ZhangDie'] |
| showTitle | 是否显示表头 | Boolean | true |
| showScroller | 是否显示上下滚动条 | Boolean | true |
| height | 每一份数据的高度 | Number | 30 |
| precision | 小数位 | Number | 2 |
##### events
| 事件名 | 说明 | 返回值 |
| :--: | :--: | :--: |
| left-click | 左键单击 | 对应的obj |
| right-click | 右键单击 | 对应的obj |
| dbl-click | 双击 | 对应的obj |
| focused-ischange | | 激活的obj |
##### slot
| 名称 | 说明 | slot-scope |
| :--: | :--: | :--: |
| default | 自定列表单项 | itemHeight行高; focusedObj选中行的obj |
| loading | 数据请求回来之前的内容显示 | 无 |
##### demo
loading content