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

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