dzhyun-table v0.1.64

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

events

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

events

slot

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>