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
| <script setup>
| import {reactive, ref} from "vue";
| import {useI18n} from "vue-i18n";
| const { t } = useI18n()
| const xGrid = ref()
| const gridOptions = reactive({
| border: "full",//表格加边框
| keepSource: true,//保持源数据
| align: 'center',//文字居中
| stripe:true,//斑马纹
| rowConfig: {isCurrent: true, isHover: true,height: 30, useKey: true},//鼠标移动或选择高亮
| id: 'productBOM',
| showFooter: true,//显示脚
| printConfig: {},
| importConfig: {},
| exportConfig: {},
| scrollX:{enabled: true},
| scrollY:{ enabled: true ,gt:0},//开启虚拟滚动
| showOverflow:true,
| columnConfig: {
| resizable: true,
| useKey: true
| },
| customConfig: {
| storage: true
| },
| editConfig: {
| trigger: 'click',
| mode: 'row',
| showStatus: true
| },
| columns:[
| {title: t('basicData.operate'), width: 120, fixed:"left"},
| {field:'state',title: '类型' },
| {field:'state',title: '物料编号', },
| {field: 'id', title: '物料名称'},
| {field:'state',title: '消耗量' },
| {field:'state',title: '价格' }
| ],//表头参数
| data:[],//表格数据
|
|
| })
|
|
| </script>
|
| <template>
| <el-card style="max-width: 480px">
| <p v-for="o in 4" :key="o" class="text item">{{ '单片' + o }}</p>
| </el-card>
| <vxe-grid
| class="mytable-scrollbar"
| ref="xGrid"
| v-bind="gridOptions"
| ></vxe-grid>
|
| </template>
|
| <style scoped>
|
| </style>
|
|
