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
| <script setup>
| import BasicTable from '@/components/basic/BasicTable.vue'
| import request from "@/utils/request"
| import deepClone from "@/utils/deepClone";
| import {ElMessage} from "element-plus";
| import router from "@/router";
| import {onMounted, ref} from "vue";
|
|
|
|
|
| /*title里的参数设置
| * {
| * type:{expand,checkbox} 类型
| * field: 数据指向位置
| * title: 标题
| * sortable: 是否可排序
| * editRender: 是否可编辑
| * showOverflow: 是否显示省略号
| * width: 宽度
| * fixed: left,right是否固定列
| * slots：插槽类型
| * filters:[{ data: '' }],slots: { filter: 'num1_filter' }} 表头筛选框
| * editRender: { name: 'input', attrs: { placeholder: '' } } 数据列是否可编辑
| * }
| *
| * */
|
| let tableProp = $ref({
| title:[
| {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
| { type: 'checkbox',fixed:"left", title: '选择', width: 80 },
| { type: 'seq',fixed:"left", title: '自序', width: 80 },
| {title: '操作', width: 110, slots: { default: 'button_slot' },fixed:"left"},
| {field: 'prodID', title: '编号', sortable: true,editRender: { name: 'input', attrs: { placeholder: '' } } },
| {field: 'product', title: '名称', sortable: true,showOverflow:"ellipsis" ,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
| {field: 'typeName', title: '所属类别', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
| {field: 'query', title: '快速查询', sortable: true},
| {field: 'remarks', title: '备注', sortable: true,showOverflow:"ellipsis"},
| {field: 'creator', title: '创建人', sortable: true},
| {field: 'createTime', title: '创建时间', sortable: true}
| ],
| datas:[
| {
| "id": 24,
| "prodID": "0101000001",
| "product": "6mm超白平钢(外)+1.52PVB超白+6mm超白LNGFX85平钢+20Ar暖边条(结)+10mm超白LYE-80平钢(内) ",
| "glassType": "0101",
| "typeName": "平钢",
| "totalThickness": 40,
| "thickness": 22,
| "remarks": "1",
| "state": 1,
| "creator": "张三里",
| "createTime": "2023-11-23",
| "updateTime": null,
| "query": "6+6+10+10+10",
| "_X_ROW_KEY": "row_11"
| },{
| "id": 24,
| "prodID": "0101000001",
| "product": "6mm超白平钢(外)+1.52PVB超白+6mm超白LNGFX85平钢+20Ar暖边条(结)+10mm超白LYE-80平钢(内) ",
| "glassType": "0101",
| "typeName": "平钢",
| "totalThickness": 40,
| "thickness": 22,
| "remarks": "1",
| "state": 1,
| "creator": "张三里",
| "createTime": "2023-11-23",
| "updateTime": null,
| "query": "6+6+10+10+10",
| "_X_ROW_KEY": "row_11"
| }],
| //脚部求和
| footList:['remarks'],
| //筛选条件列
| filter:{
| product:'n*'
| },
| buttons: [
| //{ code: 'myInsert', name: '新增' },
| // { code: 'deleteList', name: '删除' },
| { code: 'checkList', name: '提交' }
| ],
|
| })
| let flag = $ref(false)
| request.get("/product").then((res) => {
| if(res.code==200){
| //tableProp.datas= res.data
| flag = true
| //console.log(res.data)
| }else{
| ElMessage.warning(res.msg)
| }
| })
|
| //必须加上
| //接收子组件传过来的选中复选框数据
| const getCheckList = (row) =>{
| alert('我接收到子组件传送的确认复选框信息可在控制台查看')
| console.log(row)
| }
|
| //必须加上
| const getChildren = (row,type) =>{
| switch (type) {
| case 'edit' :{
| alert('我接收到子组件传送的编辑信息')
|
| break
| }
| case 'delete':{
| alert('我接收到子组件传送的删除信息')
| break
| }
|
| }
|
|
| }
| const getFilterChildren = (param) =>{
|
|
| }
|
|
| </script>
|
| <template>
|
| <div style="width: 100%;height: 100%;">
| <el-input v-model="tableProp.filter.product"/>
|
| <basic-table v-if="flag"
| :tableProp="tableProp"
| @getCheckList="getCheckList"
| @getChildren="getChildren"
| @getFilterChildren="getFilterChildren"
| ></basic-table>
| </div>
| </template>
|
| <style scoped>
|
| </style>
|
|
