# dzhyun-table

> 基于 Vue 的高性能无限滚动列表组件

Latest version **0.1.64** (published 2020-02-28) · ISC license · 0 weekly downloads

## Install

```sh
npm install dzhyun-table
pnpm add dzhyun-table
yarn add dzhyun-table
bun add dzhyun-table
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.64 |
| Published | 2020-02-28 |
| First published | 2019-04-11 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 284.3 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | cherish |
| Maintainers | sheshire |

## Links

- npm: https://www.npmjs.com/package/dzhyun-table
- npm.io page: https://npm.io/package/dzhyun-table

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^2.6.6

## Recent versions

- 0.1.64 (latest) — 2020-02-28
- 0.1.63 — 2020-02-26
- 0.1.62 — 2020-02-26
- 0.1.61 — 2020-02-26
- 0.1.60 — 2020-02-24
- 0.1.59 — 2020-02-24
- 0.1.58 — 2020-02-23
- 0.1.56 — 2019-06-25
- 0.1.55 — 2019-06-25
- 0.1.54 — 2019-06-25
- 0.1.53 — 2019-06-25
- 0.1.52 — 2019-05-27
- 0.1.51 — 2019-05-23
- 0.1.50 — 2019-05-23
- 0.1.49 — 2019-05-23
- … 49 more at https://npm.io/package/dzhyun-table/versions

## README

# dzhyun-table

> 基于Vue封装, PC端大列表组件 large-list, 小列表组件 small-list, 和static-small-list, 封装滚动业务逻辑, 依赖dzhyunjs获取数据, 必须实现配置好vue插件(例如：dzhyun-vue-data), 即必须有全局this.$dzhyun

## 安装

``` bash
$ npm install dzhyun-table -S
```
## 使用

在 `main.js` 文件中引入插件和样式并注册

``` bash
# 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
```
<template>
  <div class="largelist-demo">
    <large-list
      :showTitle="false"
      :showScroller="false"
      :height=50
      :theme="theme"
      :fieldsConfig="fieldsConfig"
      @right-click="rightclick"
      @dbl-click="dblclick"
      @left-click="leftclick"
      @fieldsConfigChange="fieldsConfigChange"
    >
      <!-- <template slot-scope="slotScopes">
        <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] || '--'}}</span>
      </template> -->
    </large-list>
  </div>
</template>

<script>
import { theme, fieldsConfig } from "../utils/fieldsConfig.js";
export default {
  name: "largelist-demo",
  data() {
    return {
      theme,
      fieldsConfig
    };
  },
  methods: {
    rightclick(obj) {
      console.log("right-click", obj);
    },
    dblclick(obj) {
      console.log("dbl-click", obj);
    },
    leftclick(obj) {
      console.log("left-click", obj);
    },
    fieldsConfigChange(new_fieldsConfig) {
      this.fieldsConfig = new_fieldsConfig
    }
  }
};
</script>
<style lang="less">
.largelist-demo {
  width: 100%;
  height: 100%;
}
</style>
```
### 小列表-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 
```
<template>
  <div class="smallist-demo">
    <small-list
      :showTitle="true"
      :showScroller="false"
      :height=50
      :theme="theme"
      :fields="fields"
      :title="title"
      :titleAlign="titleAlign"
      @right-click="rightclick"
      @dbl-click="dblclick"
      @left-click="leftclick"
    >
      <!-- <template slot-scope="slotScopes">
        <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] || '--'}}</span>
      </template> -->
      <template slot="loading"><p>loading content</p></template>
    </small-list>
  </div>
</template>

<script>
import { theme, fieldsConfig, title } from "../utils/fieldsConfig.js";
export default {
  name: "smallist-demo",
  data() {
    return {
      fields: ["ZhongWenJianCheng", "ZuiXinJia", "ZhangFu"],
      titleAlign: 'left',
      theme,title
    };
  },
  methods: {
    rightclick(obj) {
      console.log("right-click", obj);
    },
    dblclick(obj) {
      console.log("dbl-click", obj);
    },
    leftclick(obj) {
      console.log("left-click", obj);
    }
  }
};
</script>
<style lang="less">
.smallist-demo {
  width: 270px;
  height: 600px;
}
</style>
```

---
_Source: https://npm.io/package/dzhyun-table · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._