vxe-table简单使用 vue vxe-table vue整合vxe-table vue2 vxe-table 简单使用_vxe-table/lib/vxe-table

作者：Gausst松鼠会 | 2024-02-25 11:09:07

踩

vxe-table/lib/vxe-table

vxe-table简单使用 vue vxe-table vue整合vxe-table vue2 vxe-table 简单使用

安装vxe-table
引用
使用

安装vxe-table

vue2稳定版本
 vue3稳定版本

npm install xe-utils vxe-table@legacy
1

安装 vxe-table 依赖的插件

npm i xe-utils
1

引用

我这边是全局引入，可以根据自己情况按需引入
main.js


      import Vue from 'vue'
      import VXETable from 'vxe-table'
      import 'vxe-table/lib/style.css'

      Vue.use(VXETable)

      // 给 vue 实例挂载内部对象，例如：
      // Vue.prototype.$XModal = VXETable.modal
      // Vue.prototype.$XPrint = VXETable.print
      // Vue.prototype.$XSaveFile = VXETable.saveFile
      // Vue.prototype.$XReadFile = VXETable.readFile
1
2
3
4
5
6
7
8
9
10
11
12

使用

我这边使用的 demo 用到了 虚拟滚动,列筛选，自定义列内容 ，可直接全复制

<!-- 页面 -->
<template>
 		<vxe-button @click="clearFilter">清除所有的筛选条件</vxe-button>
       <!--    表格-->
      <div class="main-table-div">
        <vxe-table
          ref="xTable1"
          size="mini"
          border
          max-height="800"
          :row-config="{ isHover: true, height: 60 }"
          :column-config="{ resizable: true }"
          :sort-config="{ trigger: 'cell' }"
          :data="tableData"
          align="center"
          show-overflow
          :scroll-x="{gt: 30}"
          :scroll-y="{gt: 300}"
          :filter-config="{remote: true}"
          @filter-change="filterChangeEvent"
        >
			
          <vxe-column title="机种名称" field="machineTypeName" width="200" :filters="[{ data: '' }]" :filter-method="filterMethod">
            <template #filter="{ $panel, column }">
            <!-- 官网给的示例是遍历  filters 属性值数组 ，但是一般搜索只有一个输入框，不需要遍历，尽量减少一点性能消耗，我这边使用固定数组第一个元素-->
            <!--  <input type="type" v-for="(option, index) in column.filters" :key="index" v-model="option.data" @input="$panel.changeOption($event, !!option.data, option)"> -->
              <input v-model="column.filters[0].data" type="type" @input="$panel.changeOption($event, !!column.filters[0].data, column.filters[0])">
            </template>
          </vxe-column>
          <vxe-column title="辅料名称" field="auxiliaryMaterialName" width="200" :filters="[{ data: '' }]" :filter-method="filterMethod">
            <template #filter="{ $panel, column }">
              <input v-model="column.filters[0].data" type="type" @input="$panel.changeOption($event, !!column.filters[0].data, column.filters[0])">
            </template>
          </vxe-column>
          <vxe-column title="品牌" field="brand" width="120" :filters="[{ data: '' }]" :filter-method="filterMethod">
            <template #filter="{ $panel, column }">
              <input v-model="column.filters[0].data" type="type" @input="$panel.changeOption($event, !!column.filters[0].data, column.filters[0])">
            </template>
          </vxe-column>
          <vxe-column title="规格型号" field="specification" width="150" :filters="[{ data: '' }]" :filter-method="filterMethod">
            <template #filter="{ $panel, column }">
              <input v-model="column.filters[0].data" type="type" @input="$panel.changeOption($event, !!column.filters[0].data, column.filters[0])">
            </template>
          </vxe-column>
          <vxe-column title="封装用量(ml/g)" field="packageAmount" width="130" :filters="[{ data: '' }]" :filter-method="filterMethod">
            <template #filter="{ $panel, column }">
              <input v-model="column.filters[0].data" type="type" @input="$panel.changeOption($event, !!column.filters[0].data, column.filters[0])">
            </template>
          </vxe-column>
          <vxe-column title="料号" field="materialNumber" width="150" :filters="[{ data: '' }]" :filter-method="filterMethod">
            <template #filter="{ $panel, column }">
              <input v-model="column.filters[0].data" type="type" @input="$panel.changeOption($event, !!column.filters[0].data, column.filters[0])">
            </template>
          </vxe-column>
          <vxe-column title="用量(ml/g)" field="dosage" width="120" :filters="[{ data: '' }]" :filter-method="filterMethod">
            <template #filter="{ $panel, column }">
              <input v-model="column.filters[0].data" type="type" @input="$panel.changeOption($event, !!column.filters[0].data, column.filters[0])">
            </template>
          </vxe-column>
          <vxe-column title="使用位置" field="usePosition" width="120" :filters="[{ data: '' }]" :filter-method="filterMethod">
            <template #filter="{ $panel, column }">
              <input v-model="column.filters[0].data" type="type" @input="$panel.changeOption($event, !!column.filters[0].data, column.filters[0])">
            </template>
          </vxe-column>
          <vxe-column title="其他说明" field="doc" width="120" show-header-overflow show-overflow="title" show-footer-overflow />
          <vxe-column title="创建时间" field="addTime" width="180" />
          <vxe-column title="创建人" field="addUserName" width="180" :filters="[{ data: '' }]" :filter-method="filterMethod">
            <template #filter="{ $panel, column }">
              <input v-model="column.filters[0].data" type="type" @input="$panel.changeOption($event, !!column.filters[0].data, column.filters[0])">
            </template>
          </vxe-column>
          <vxe-column title="最后修改时间" field="updateTime" width="180" />
          <vxe-column title="最后修改人" field="updateUserName" width="180" :filters="[{ data: '' }]" :filter-method="filterMethod">
            <template #filter="{ $panel, column }">
              <input v-model="column.filters[0].data" type="type" @input="$panel.changeOption($event, !!column.filters[0].data, column.filters[0])">
            </template>
          </vxe-column>
          <vxe-column title="操作" width="200" fixed="right">
            <template #default="{ row, rowIndex }">
              <div>
                <el-button size="small" type="text" @click="showChange(row)">修改</el-button>
                <el-button size="small" type="text" @click="deleteById(row, rowIndex)">删除</el-button>
              </div>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
</template>

<script>
export default {
  name: 'Index',

  components: {},
  props: [],
  data() {
    return {
    
      tableData: [ {
                "id": 1006,
                "machineTypeName": "Cheng Fat",
                "auxiliaryMaterialName": "Cheng Fat",
                "brand": "aeaVNGZ7An",
                "specification": "IhABS5QBlX",
                "packageAmount": "14LBJIvbgZ",
                "materialNumber": "Ik8mzrfSWg",
                "dosage": "4FOZcY3KEF",
                "usePosition": "DWI5RHkBIY",
                "doc": "nT65qhLkvI",
                "addTime": "2017-09-10 00:22:20",
                "addUserName": "Cheng Fat",
                "updateTime": "2021-04-16 15:04:40",
                "updateUserName": "2005-09-24"
            },
            {
                "id": 1005,
                "machineTypeName": "Yuen Tsz Hin",
                "auxiliaryMaterialName": "Yuen Tsz Hin",
                "brand": "e7fPgpqElq",
                "specification": "l57klAlUd4",
                "packageAmount": "6Y4e7xcfWg",
                "materialNumber": "2FOmQSMC8H",
                "dosage": "TfdbMdn10B",
                "usePosition": "vFVoDlRbYI",
                "doc": "6sArmCG4oP",
                "addTime": "2002-08-12 05:47:08",
                "addUserName": "Yuen Tsz Hin",
                "updateTime": "2009-09-21 22:40:57",
                "updateUserName": "2001-04-10"
            }],
      search: {
        machineTypeName: '',
        auxiliaryMaterialName: '',
        brand: '',
        specification: '',
        packageAmount: '',
        materialNumber: '',
        dosage: '',
        usePosition: '',
        addUserName: '',
        updateUserName: ''
      }
    }
  },

  computed: {},

  watch: {},

  beforeMount() { },

  mounted() { },
  created() {
  },
  activated() {
  },
  methods: {
    /**
     *  当筛选条件发生变化时会触发该事件,api: https://vxetable.cn/v3/#/table/api?filterName=filter-change
     * @param {*} column 当前筛选的列属性
     * @param {*} property 当前筛选的列名称
     * @param {*} values 不知道，忽略
     * @param {*} datas 当前表格所有列的筛选数据值列表
     * @param {*} filterList 当前表格所有列的筛选数据列表，带列属性和值
     * @param {*} $event 事件
     */
    filterChangeEvent({ column, property, values, datas, filterList, $event }) {
      console.info('列筛选')
      // console.info('column', column)
      // console.info('property', property)
      // console.info('values', values)
      // console.info('datas', datas)
      console.info('filterList', filterList)
      // console.info('$event', $event)
      
      // 先清空之前的搜索对象信息
      this.search = {
        machineTypeName: '',
        auxiliaryMaterialName: '',
        brand: '',
        specification: '',
        packageAmount: '',
        materialNumber: '',
        dosage: '',
        usePosition: '',
        addUserName: '',
        updateUserName: ''
      }
      // 遍历当前表所有的筛选数据，赋值给搜索对象
      filterList.forEach(item => {
        // 将当前筛选的列条件数据赋值给 查询对象
        console.info(item)
        // item.property 当前筛选条件的列名称
        // item.datas[0] 当前筛选条件的列值 因为 每列的 filters 数组数据 只有一个元素，固定0
        this.search[item.property] = item.datas[0]
      })
      console.info('查询参数', this.search)
      // 将参数传递到后台进行查询

    },
    // 表格单个列筛选，这个筛选的是 当前表数据，不使用这个
    filterMethod({ value, row, column }) {
    },
    
    // 清空表格所有查询条件
    clearFilter() {
      this.$refs.xTable1.clearFilter()
      // 清空查询对象
      this.search = {
        machineTypeName: '',
        auxiliaryMaterialName: '',
        brand: '',
        specification: '',
        packageAmount: '',
        materialNumber: '',
        dosage: '',
        usePosition: '',
        addUserName: '',
        updateUserName: ''
      }
      // 重新请求服务端查询
      
    }
    
    // 删除
    deleteById(row, index) {
      console.info(row, index)
    },

    // 打开修改 弹出框
    showChange(row) {
      console.info(row)
    }
  }
}
</script>
<style lang="scss" scoped>
</style>

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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/140520