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
| <script setup>
| import {reactive, ref} from "vue";
| import {useI18n} from "vue-i18n";
| const { t } = useI18n()
|
| const xGrid = ref()
| const gridOptions = reactive({
| height:'100%',
| loading: false,
| border: "full",//表格加边框
| keepSource: true,//保持源数据
| align: 'center',//文字居中
| stripe:true,//斑马纹
| rowConfig: {isCurrent: true, isHover: true,height: 30, useKey: true},//鼠标移动或选择高亮
| id: 'SelectProduct1',
| scrollX:{enabled: true},
| scrollY:{ enabled: true ,gt:0},//开启虚拟滚动
| showOverflow:true,
| columnConfig: {
| resizable: true,
| useKey: true
| },
| filterConfig: { //筛选配置项
| remote: true
| },
| customConfig: {
| storage: true
| },
| editConfig: {
| trigger: 'click',
| mode: 'row',
| showStatus: true
| },
| /*formConfig: {
| data: {
| width: '',
| height: '',
| quantity: ''
| },
| items: [
| { field: 'width', title: t('order.width')+':', itemRender: { name: 'VxeInput' } },
| { field: 'height', title: t('order.height')+':', itemRender: { name: 'VxeInput' } },
| { field: 'quantity', title: t('order.quantity')+':', itemRender: { name: 'VxeInput' } },
| {
| itemRender: {
| name: 'VxeButtonGroup',
| options: [
| { type: 'submit', content: t('craft.sure'), status: 'primary' },
| { type: 'reset', content: t('product.msg.reset') }
| ]
| }
| }
| ]
| },*/
| columns:[
| {title: '选择', type:'radio', width: 70},
| {field: 'id', title: '物料编码',},
| {field:'state',title: t('order.width'),},
| {type: 'seq',title: t('order.height')},
| {field: 'id', title: t('order.totalThickness'),},
| {field: 'id', title: t('warehouseBasicData.type'),},
| {field: 'id', title: '左修边',},
| {field: 'id', title: '下修边',},
| {field: 'id', title: '右修边',},
| {field: 'id', title: '上修边',},
| {field: 'id', title: '库存数量',},
| {field: 'id', title: '加工数量',},
| {field: 'id', title: '名称',},
| {field: 'id', title: '供应商',}
| ],//表头参数
| data:null,//表格数据
| toolbarConfig: {
| buttons: [],
| slots:{
| buttons: "toolbar_buttons"
| },
| },
|
| })
| </script>
|
| <template>
| <div style="width: 100%;height: 100%">
| <vxe-grid
| @filter-change="filterChanged"
| height="100%"
| class="mytable-scrollbar"
| ref="xGrid"
| v-bind="gridOptions"
| v-on="gridEvents"
| >
|
|
| <template #num2_filter="{ column, $panel }">
| <div>
| <div v-for="(option, index) in column.filters" :key="index">
| <vxe-select v-model="option.data" :placeholder="$t('processCard.pleaseSelect')" @change="changeFilterEvent($event, option, $panel)">
| <vxe-option value="0" :label="$t('basicData.unchecked')"></vxe-option>
| <vxe-option value="1" :label="$t('basicData.selected')"></vxe-option>
| </vxe-select>
| </div>
| </div>
| </template>
|
| <template #num1_filter="{ column, $panel }">
| <div>
| <div v-for="(option, index) in column.filters" :key="index">
| <input
| type="type"
| v-model="option.data"
| @keyup.enter.native="$panel.confirmFilter()"
| @input="changeFilterEvent($event, option, $panel)"/>
| </div>
| </div>
| </template>
|
| </vxe-grid>
| </div>
| </template>
|
| <style scoped>
|
|
| </style>
|
|
