Scriptis/src/js/component/table/list.vue at 8b65642c439e8621603a7cc2c589d935b049d798 · xtt55/Scriptis · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<template>
  <div
    class="list-view"
    ref="list">
    <vuescroll
      :ops="ops"
      @handle-scroll="handleScroll">
      <list-body
        ref="body"
        :cache="cache"
        :item-size-getter="itemSizeGetter"
        :estimated-item-size="30"
        :data="data">
        <div
          slot-scope="{col}">
          <div
            v-for="(content, contentIndex) in col"
            :title="content || contentIndex"
            :key="contentIndex"
            class="we-column-item"
            :class="{'null-text': content === 'NULL', 'active': contentIndex === activeRowIndex}"
            @click.stop="columnItemClick(contentIndex)">
            <span class="we-column-item-content">{{ content }}</span>
          </div>
        </div>
      </list-body>
    </vuescroll>
  </div>
</template>
<script>
import listBody from './body.vue';
import vuescroll from 'vuescroll/dist/vuescroll-native';
export default {
    components: {
        vuescroll,
        listBody,
    },
    props: {
        cache: {
            type: Object,
            default: () => {
                return {};
            },
        },
        data: {
            type: Array,
            required: true,
        },
        estimatedItemSize: {
            type: Number,
            default: 30,
        },
        itemSizeGetter: {
            type: Function,
        },
    },
    data() {
        return {
            ops: {
                bar: {
                    background: '#5e9de0',
                    keepShow: true,
                    minSize: 0.05,
                },
                rail: {
                    size: '10px',
                    opacity: 0,
                    background: '#fff',
                },
                scrollButton: {
                    enable: true,
                    background: '#cecece',
                },
            },
            activeRowIndex: null,
        };
    },
    methods: {
        handleScroll(v, h) {
            this.$emit('on-scroll', { v, h });
            this.$refs.body.handleScroll(v, h);
        },
        columnItemClick(index) {
            this.activeRowIndex = index;
            this.$emit('on-click', index);
        },
    },
};
</script>