dzhyun-table

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>