style:下拉表格选择
Showing
3 changed files
with
316 additions
and
10 deletions
src/components/selectTable/index.vue
0 → 100644
1 | <!-- | ||
2 | * @Descripttion: 表格选择器组件 | ||
3 | * @version: 1.3 | ||
4 | * @Author: sakuya | ||
5 | * @Date: 2021年6月10日10:04:07 | ||
6 | * @LastEditors: Please set LastEditors | ||
7 | * @LastEditTime: 2023-06-29 11:14:11 | ||
8 | --> | ||
9 | |||
10 | <template> | ||
11 | <el-select ref="select" v-model="defaultValue" :size="size" :clearable="clearable" :multiple="multiple" :collapse-tags="collapseTags" | ||
12 | :collapse-tags-tooltip="collapseTagsTooltip" :filterable="filterable" :placeholder="placeholder" :disabled="disabled" :filter-method="filterMethod" | ||
13 | @remove-tag="removeTag" @visible-change="visibleChange" @clear="clear"> | ||
14 | <template #empty> | ||
15 | <div class="sc-table-select__table" :style="{width: tableWidth+'px'}" v-loading="loading"> | ||
16 | <div class="sc-table-select__header"> | ||
17 | <slot name="header" :form="formData" :submit="formSubmit"></slot> | ||
18 | </div> | ||
19 | <el-table ref="table" :data="tableData" :height="245" :highlight-current-row="!multiple" @row-click="click" @select="select" @select-all="selectAll"> | ||
20 | <el-table-column v-if="multiple" type="selection" width="45"></el-table-column> | ||
21 | <el-table-column v-else type="index" width="45"> | ||
22 | <template #default="scope"><span>{{scope.$index+(currentPage - 1) * pageSize + 1}}</span></template> | ||
23 | </el-table-column> | ||
24 | <slot></slot> | ||
25 | </el-table> | ||
26 | <div class="sc-table-select__page"> | ||
27 | <el-pagination small background layout="prev, pager, next" :total="total" :page-size="pageSize" v-model:currentPage="currentPage" | ||
28 | @current-change="reload"></el-pagination> | ||
29 | </div> | ||
30 | </div> | ||
31 | </template> | ||
32 | </el-select> | ||
33 | </template> | ||
34 | |||
35 | <script> | ||
36 | import config from "./tableSelect"; | ||
37 | |||
38 | export default { | ||
39 | props: { | ||
40 | modelValue: null, | ||
41 | apiObj: { type: Object, default: () => { } }, | ||
42 | placeholder: { type: String, default: "请选择" }, | ||
43 | size: { type: String, default: "small" }, | ||
44 | clearable: { type: Boolean, default: false }, | ||
45 | multiple: { type: Boolean, default: false }, | ||
46 | filterable: { type: Boolean, default: false }, | ||
47 | collapseTags: { type: Boolean, default: false }, | ||
48 | collapseTagsTooltip: { type: Boolean, default: false }, | ||
49 | disabled: { type: Boolean, default: false }, | ||
50 | tableWidth: { type: Number, default: 400 }, | ||
51 | mode: { type: String, default: "popover" }, | ||
52 | props: { type: Object, default: () => { } } | ||
53 | }, | ||
54 | data () { | ||
55 | return { | ||
56 | loading: false, | ||
57 | keyword: null, | ||
58 | defaultValue: [], | ||
59 | tableData: [], | ||
60 | pageSize: config.pageSize, | ||
61 | total: 0, | ||
62 | currentPage: 1, | ||
63 | defaultProps: { | ||
64 | label: config.props.label, | ||
65 | value: config.props.value, | ||
66 | page: config.request.page, | ||
67 | pageSize: config.request.pageSize, | ||
68 | keyword: config.request.keyword | ||
69 | }, | ||
70 | formData: {} | ||
71 | } | ||
72 | }, | ||
73 | computed: { | ||
74 | |||
75 | }, | ||
76 | watch: { | ||
77 | modelValue: { | ||
78 | handler () { | ||
79 | this.defaultValue = this.modelValue | ||
80 | this.autoCurrentLabel() | ||
81 | }, | ||
82 | deep: true | ||
83 | } | ||
84 | }, | ||
85 | mounted () { | ||
86 | this.defaultProps = Object.assign(this.defaultProps, this.props); | ||
87 | this.defaultValue = this.modelValue | ||
88 | this.autoCurrentLabel() | ||
89 | }, | ||
90 | methods: { | ||
91 | //表格显示隐藏回调 | ||
92 | visibleChange (visible) { | ||
93 | if (visible) { | ||
94 | this.currentPage = 1 | ||
95 | this.keyword = null | ||
96 | this.formData = {} | ||
97 | this.getData() | ||
98 | } else { | ||
99 | this.autoCurrentLabel() | ||
100 | } | ||
101 | }, | ||
102 | //获取表格数据 | ||
103 | async getData () { | ||
104 | this.loading = true; | ||
105 | var reqData = { | ||
106 | [this.defaultProps.page]: this.currentPage, | ||
107 | [this.defaultProps.pageSize]: this.pageSize, | ||
108 | [this.defaultProps.keyword]: this.keyword | ||
109 | } | ||
110 | Object.assign(reqData, this.formData) | ||
111 | // var res = await this.apiObj.get(reqData); | ||
112 | let res = { | ||
113 | code: 200, | ||
114 | data: { | ||
115 | total: 2, rows: [ | ||
116 | { | ||
117 | user: 11111111111, | ||
118 | id: 111111111111 | ||
119 | }, | ||
120 | { | ||
121 | user: 2222222222222, | ||
122 | id: 22222222222 | ||
123 | } | ||
124 | ] | ||
125 | }, | ||
126 | message: "" | ||
127 | } | ||
128 | var parseData = config.parseData(res) | ||
129 | this.tableData = parseData.rows; | ||
130 | this.total = parseData.total; | ||
131 | this.loading = false; | ||
132 | //表格默认赋值 | ||
133 | this.$nextTick(() => { | ||
134 | if (this.multiple) { | ||
135 | this.defaultValue.forEach(row => { | ||
136 | var setrow = this.tableData.filter(item => item[this.defaultProps.value] === row[this.defaultProps.value]) | ||
137 | if (setrow.length > 0) { | ||
138 | this.$refs.table.toggleRowSelection(setrow[0], true); | ||
139 | } | ||
140 | }) | ||
141 | } else { | ||
142 | var setrow = this.tableData.filter(item => item[this.defaultProps.value] === this.defaultValue[this.defaultProps.value]) | ||
143 | this.$refs.table.setCurrentRow(setrow[0]); | ||
144 | } | ||
145 | this.$refs.table.setScrollTop(0) | ||
146 | }) | ||
147 | }, | ||
148 | //插糟表单提交 | ||
149 | formSubmit () { | ||
150 | this.currentPage = 1 | ||
151 | this.keyword = null | ||
152 | this.getData() | ||
153 | }, | ||
154 | //分页刷新表格 | ||
155 | reload () { | ||
156 | this.getData() | ||
157 | }, | ||
158 | //自动模拟options赋值 | ||
159 | autoCurrentLabel () { | ||
160 | this.$nextTick(() => { | ||
161 | if (this.multiple) { | ||
162 | this.$refs.select.selected.forEach(item => { | ||
163 | item.currentLabel = item.value[this.defaultProps.label] | ||
164 | }) | ||
165 | } else { | ||
166 | this.$refs.select.selectedLabel = this.defaultValue[this.defaultProps.label] | ||
167 | } | ||
168 | }) | ||
169 | }, | ||
170 | //表格勾选事件 | ||
171 | select (rows, row) { | ||
172 | var isSelect = rows.length && rows.indexOf(row) !== -1 | ||
173 | if (isSelect) { | ||
174 | this.defaultValue.push(row) | ||
175 | } else { | ||
176 | this.defaultValue.splice(this.defaultValue.findIndex(item => item[this.defaultProps.value] == row[this.defaultProps.value]), 1) | ||
177 | } | ||
178 | this.autoCurrentLabel() | ||
179 | this.$emit('update:modelValue', this.defaultValue); | ||
180 | this.$emit('change', this.defaultValue); | ||
181 | }, | ||
182 | //表格全选事件 | ||
183 | selectAll (rows) { | ||
184 | var isAllSelect = rows.length > 0 | ||
185 | if (isAllSelect) { | ||
186 | rows.forEach(row => { | ||
187 | var isHas = this.defaultValue.find(item => item[this.defaultProps.value] == row[this.defaultProps.value]) | ||
188 | if (!isHas) { | ||
189 | this.defaultValue.push(row) | ||
190 | } | ||
191 | }) | ||
192 | } else { | ||
193 | this.tableData.forEach(row => { | ||
194 | var isHas = this.defaultValue.find(item => item[this.defaultProps.value] == row[this.defaultProps.value]) | ||
195 | if (isHas) { | ||
196 | this.defaultValue.splice(this.defaultValue.findIndex(item => item[this.defaultProps.value] == row[this.defaultProps.value]), 1) | ||
197 | } | ||
198 | }) | ||
199 | } | ||
200 | this.autoCurrentLabel() | ||
201 | this.$emit('update:modelValue', this.defaultValue); | ||
202 | this.$emit('change', this.defaultValue); | ||
203 | }, | ||
204 | click (row) { | ||
205 | if (this.multiple) { | ||
206 | //处理多选点击行 | ||
207 | } else { | ||
208 | this.defaultValue = row | ||
209 | this.$refs.select.blur() | ||
210 | this.autoCurrentLabel() | ||
211 | this.$emit('update:modelValue', this.defaultValue); | ||
212 | this.$emit('change', this.defaultValue); | ||
213 | } | ||
214 | }, | ||
215 | //tags删除后回调 | ||
216 | removeTag (tag) { | ||
217 | var row = this.findRowByKey(tag[this.defaultProps.value]) | ||
218 | this.$refs.table.toggleRowSelection(row, false); | ||
219 | this.$emit('update:modelValue', this.defaultValue); | ||
220 | }, | ||
221 | //清空后的回调 | ||
222 | clear () { | ||
223 | this.$emit('update:modelValue', this.defaultValue); | ||
224 | }, | ||
225 | // 关键值查询表格数据行 | ||
226 | findRowByKey (value) { | ||
227 | return this.tableData.find(item => item[this.defaultProps.value] === value) | ||
228 | }, | ||
229 | filterMethod (keyword) { | ||
230 | if (!keyword) { | ||
231 | this.keyword = null; | ||
232 | return false; | ||
233 | } | ||
234 | this.keyword = keyword; | ||
235 | this.getData() | ||
236 | }, | ||
237 | // 触发select隐藏 | ||
238 | blur () { | ||
239 | this.$refs.select.blur(); | ||
240 | }, | ||
241 | // 触发select显示 | ||
242 | focus () { | ||
243 | this.$refs.select.focus(); | ||
244 | } | ||
245 | } | ||
246 | } | ||
247 | </script> | ||
248 | |||
249 | <style scoped> | ||
250 | .sc-table-select__table { | ||
251 | padding: 12px; | ||
252 | } | ||
253 | .sc-table-select__page { | ||
254 | padding-top: 12px; | ||
255 | } | ||
256 | </style> |
src/components/selectTable/tableSelect.js
0 → 100644
1 | /* | ||
2 | * @Description: | ||
3 | * @Autor: renchao | ||
4 | * @LastEditTime: 2023-06-29 11:05:49 | ||
5 | */ | ||
6 | //表格选择器配置 | ||
7 | |||
8 | export default { | ||
9 | pageSize: 10, //表格每一页条数 | ||
10 | parseData: function (res) { | ||
11 | return { | ||
12 | data: res.data, | ||
13 | rows: res.data.rows, //分析行数据字段结构 | ||
14 | total: res.data.total, //分析总数字段结构 | ||
15 | msg: res.message, //分析描述字段结构 | ||
16 | code: res.code //分析状态字段结构 | ||
17 | } | ||
18 | }, | ||
19 | request: { | ||
20 | page: 'page', //规定当前分页字段 | ||
21 | pageSize: 'pageSize', //规定一页条数字段 | ||
22 | keyword: 'keyword' //规定搜索字段 | ||
23 | }, | ||
24 | props: { | ||
25 | label: 'label', //映射label显示字段 | ||
26 | value: 'value', //映射value值字段 | ||
27 | } | ||
28 | } |
1 | <!-- | 1 | <!-- |
2 | * @Description: | 2 | * @Description: |
3 | * @Autor: renchao | 3 | * @Autor: renchao |
4 | * @LastEditTime: 2023-05-25 08:59:02 | 4 | * @LastEditTime: 2023-06-29 11:13:35 |
5 | --> | 5 | --> |
6 | <template> | 6 | <template> |
7 | <!-- 受理信息 --> | 7 | <!-- 受理信息 --> |
... | @@ -88,46 +88,55 @@ | ... | @@ -88,46 +88,55 @@ |
88 | <el-row :gutter="10"> | 88 | <el-row :gutter="10"> |
89 | <el-col :span="8"> | 89 | <el-col :span="8"> |
90 | <el-form-item label="农用地面积:"> | 90 | <el-form-item label="农用地面积:"> |
91 | <el-input v-model="ruleForm.tdsyq.nydmj"></el-input> | 91 | <el-input v-model="ruleForm.tdsyq.nydmj"></el-input> |
92 | </el-form-item> | 92 | </el-form-item> |
93 | </el-col> | 93 | </el-col> |
94 | <el-col :span="8"> | 94 | <el-col :span="8"> |
95 | <el-form-item label="耕地面积:"> | 95 | <el-form-item label="耕地面积:"> |
96 | <el-input v-model="ruleForm.tdsyq.gdmj"></el-input> | 96 | <el-input v-model="ruleForm.tdsyq.gdmj"></el-input> |
97 | </el-form-item> | 97 | </el-form-item> |
98 | </el-col> | 98 | </el-col> |
99 | <el-col :span="8"> | 99 | <el-col :span="8"> |
100 | <el-form-item label="林地面积:"> | 100 | <el-form-item label="林地面积:"> |
101 | <el-input v-model="ruleForm.tdsyq.ldmj"></el-input> | 101 | <el-input v-model="ruleForm.tdsyq.ldmj"></el-input> |
102 | </el-form-item> | 102 | </el-form-item> |
103 | </el-col> | 103 | </el-col> |
104 | </el-row> | 104 | </el-row> |
105 | <el-row :gutter="10"> | 105 | <el-row :gutter="10"> |
106 | <el-col :span="8"> | 106 | <el-col :span="8"> |
107 | <el-form-item label="草地面积:"> | 107 | <el-form-item label="草地面积:"> |
108 | <el-input v-model="ruleForm.tdsyq.cdmj"></el-input> | 108 | <el-input v-model="ruleForm.tdsyq.cdmj"></el-input> |
109 | </el-form-item> | 109 | </el-form-item> |
110 | </el-col> | 110 | </el-col> |
111 | <el-col :span="8"> | 111 | <el-col :span="8"> |
112 | <el-form-item label="其他农用地面积:"> | 112 | <el-form-item label="其他农用地面积:"> |
113 | <el-input v-model="ruleForm.tdsyq.qtnydmj"></el-input> | 113 | <el-input v-model="ruleForm.tdsyq.qtnydmj"></el-input> |
114 | </el-form-item> | 114 | </el-form-item> |
115 | </el-col> | 115 | </el-col> |
116 | <el-col :span="8"> | 116 | <el-col :span="8"> |
117 | <el-form-item label="建筑使用面积:"> | 117 | <el-form-item label="建筑使用面积:"> |
118 | <el-input v-model="ruleForm.tdsyq.jsydmj"></el-input> | 118 | <el-input v-model="ruleForm.tdsyq.jsydmj"></el-input> |
119 | </el-form-item> | 119 | </el-form-item> |
120 | </el-col> | 120 | </el-col> |
121 | </el-row> | 121 | </el-row> |
122 | <el-row :gutter="10"> | 122 | <el-row :gutter="10"> |
123 | <el-col :span="8"> | 123 | <el-col :span="8"> |
124 | <el-form-item label="未利用地面积:"> | 124 | <el-form-item label="未利用地面积:"> |
125 | <el-input v-model="ruleForm.tdsyq.wlydmj"></el-input> | 125 | <el-input v-model="ruleForm.tdsyq.wlydmj"></el-input> |
126 | </el-form-item> | 126 | </el-form-item> |
127 | </el-col> | 127 | </el-col> |
128 | <el-col :span="8"> | 128 | <el-col :span="8"> |
129 | <el-form-item label="面积单位:"> | 129 | <el-form-item label="面积单位:"> |
130 | <el-input v-model="ruleForm.tdsyq.mjdw"></el-input> | 130 | <el-input v-model="ruleForm.tdsyq.mjdw"></el-input> |
131 | </el-form-item> | ||
132 | </el-col> | ||
133 | |||
134 | <el-col :span="8"> | ||
135 | <el-form-item label="下拉表格测试:"> | ||
136 | <select-table v-model="value2" :table-width="600" :props="props" @change="change"> | ||
137 | <el-table-column prop="id" label="ID" width="180"></el-table-column> | ||
138 | <el-table-column prop="user" label="姓名"></el-table-column> | ||
139 | </select-table> | ||
131 | </el-form-item> | 140 | </el-form-item> |
132 | </el-col> | 141 | </el-col> |
133 | 142 | ||
... | @@ -203,7 +212,9 @@ | ... | @@ -203,7 +212,9 @@ |
203 | import { mapGetters } from "vuex" | 212 | import { mapGetters } from "vuex" |
204 | import { Init, saveData } from "@/api/workflow/tdsyqFlow.js" | 213 | import { Init, saveData } from "@/api/workflow/tdsyqFlow.js" |
205 | import qlrCommonTable from "@/views/workflow/components/qlrCommonTable" | 214 | import qlrCommonTable from "@/views/workflow/components/qlrCommonTable" |
215 | import selectTable from '@/components/selectTable/index.vue' | ||
206 | export default { | 216 | export default { |
217 | components: { qlrCommonTable, selectTable }, | ||
207 | mounted () { | 218 | mounted () { |
208 | this.ableOperation = this.$parent.currentSelectTab.ableOperation | 219 | this.ableOperation = this.$parent.currentSelectTab.ableOperation |
209 | this.propsParam = this.$attrs; | 220 | this.propsParam = this.$attrs; |
... | @@ -222,12 +233,22 @@ | ... | @@ -222,12 +233,22 @@ |
222 | }) | 233 | }) |
223 | }) | 234 | }) |
224 | }, | 235 | }, |
225 | components: { qlrCommonTable }, | 236 | |
226 | computed: { | 237 | computed: { |
227 | ...mapGetters(["dictData", "flag"]) | 238 | ...mapGetters(["dictData", "flag"]) |
228 | }, | 239 | }, |
229 | data () { | 240 | data () { |
230 | return { | 241 | return { |
242 | value2: { | ||
243 | id: "520000198407304275", | ||
244 | user: "史平" | ||
245 | }, | ||
246 | props: { | ||
247 | label: 'user', | ||
248 | value: 'id', | ||
249 | keyword: "keyword" | ||
250 | }, | ||
251 | |||
231 | //表单是否可操作 | 252 | //表单是否可操作 |
232 | ableOperation: true, | 253 | ableOperation: true, |
233 | key: 0, | 254 | key: 0, |
... | @@ -241,6 +262,7 @@ | ... | @@ -241,6 +262,7 @@ |
241 | } | 262 | } |
242 | }, | 263 | }, |
243 | methods: { | 264 | methods: { |
265 | change () { }, | ||
244 | // 更新权利人信息 | 266 | // 更新权利人信息 |
245 | upDateQlrxxList (val) { | 267 | upDateQlrxxList (val) { |
246 | this.ruleForm.qlrList && (this.ruleForm.qlrList = _.cloneDeep(val)) | 268 | this.ruleForm.qlrList && (this.ruleForm.qlrList = _.cloneDeep(val)) | ... | ... |
-
Please register or sign in to post a comment