style:table组件完成
Showing
6 changed files
with
21 additions
and
77 deletions
... | @@ -4,12 +4,12 @@ | ... | @@ -4,12 +4,12 @@ |
4 | * @Author: sakuya | 4 | * @Author: sakuya |
5 | * @Date: 2021年6月10日10:04:07 | 5 | * @Date: 2021年6月10日10:04:07 |
6 | * @LastEditors: Please set LastEditors | 6 | * @LastEditors: Please set LastEditors |
7 | * @LastEditTime: 2023-06-29 11:14:11 | 7 | * @LastEditTime: 2023-07-05 10:39:17 |
8 | --> | 8 | --> |
9 | 9 | ||
10 | <template> | 10 | <template> |
11 | <el-select ref="select" v-model="defaultValue" :size="size" :clearable="clearable" :multiple="multiple" :collapse-tags="collapseTags" | 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" | 12 | :collapse-tags-tooltip="collapseTagsTooltip" :filterable="filterable" :placeholder="placeholder" :disabled="disabled" |
13 | @remove-tag="removeTag" @visible-change="visibleChange" @clear="clear"> | 13 | @remove-tag="removeTag" @visible-change="visibleChange" @clear="clear"> |
14 | <template #empty> | 14 | <template #empty> |
15 | <div class="sc-table-select__table" :style="{width: tableWidth+'px'}" v-loading="loading"> | 15 | <div class="sc-table-select__table" :style="{width: tableWidth+'px'}" v-loading="loading"> |
... | @@ -19,14 +19,10 @@ | ... | @@ -19,14 +19,10 @@ |
19 | <el-table ref="table" :data="tableData" :height="245" :highlight-current-row="!multiple" @row-click="click" @select="select" @select-all="selectAll"> | 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> | 20 | <el-table-column v-if="multiple" type="selection" width="45"></el-table-column> |
21 | <el-table-column v-else type="index" width="45"> | 21 | <el-table-column v-else type="index" width="45"> |
22 | <template #default="scope"><span>{{scope.$index+(currentPage - 1) * pageSize + 1}}</span></template> | 22 | <template #default="scope"><span>{{scope.$index +1 }}</span></template> |
23 | </el-table-column> | 23 | </el-table-column> |
24 | <slot></slot> | 24 | <slot></slot> |
25 | </el-table> | 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> | 26 | </div> |
31 | </template> | 27 | </template> |
32 | </el-select> | 28 | </el-select> |
... | @@ -48,29 +44,23 @@ | ... | @@ -48,29 +44,23 @@ |
48 | disabled: { type: Boolean, default: false }, | 44 | disabled: { type: Boolean, default: false }, |
49 | tableWidth: { type: Number, default: 400 }, | 45 | tableWidth: { type: Number, default: 400 }, |
50 | mode: { type: String, default: "popover" }, | 46 | mode: { type: String, default: "popover" }, |
51 | props: { type: Object, default: () => { } } | 47 | props: { type: Object, default: () => { } }, |
48 | // 表格数据 | ||
49 | tableData: { type: Array, default: () => { [] } }, | ||
52 | }, | 50 | }, |
53 | data () { | 51 | data () { |
54 | return { | 52 | return { |
55 | loading: false, | 53 | loading: false, |
56 | keyword: null, | 54 | keyword: null, |
57 | defaultValue: [], | 55 | defaultValue: [], |
58 | tableData: [], | ||
59 | pageSize: config.pageSize, | ||
60 | total: 0, | ||
61 | currentPage: 1, | ||
62 | defaultProps: { | 56 | defaultProps: { |
63 | label: config.props.label, | 57 | label: config.props.label, |
64 | value: config.props.value, | 58 | value: config.props.value |
65 | page: config.request.page, | ||
66 | pageSize: config.request.pageSize, | ||
67 | keyword: config.request.keyword | ||
68 | }, | 59 | }, |
69 | formData: {} | 60 | formData: {} |
70 | } | 61 | } |
71 | }, | 62 | }, |
72 | computed: { | 63 | computed: { |
73 | |||
74 | }, | 64 | }, |
75 | watch: { | 65 | watch: { |
76 | modelValue: { | 66 | modelValue: { |
... | @@ -90,8 +80,6 @@ | ... | @@ -90,8 +80,6 @@ |
90 | //表格显示隐藏回调 | 80 | //表格显示隐藏回调 |
91 | visibleChange (visible) { | 81 | visibleChange (visible) { |
92 | if (visible) { | 82 | if (visible) { |
93 | this.currentPage = 1 | ||
94 | this.keyword = null | ||
95 | this.formData = {} | 83 | this.formData = {} |
96 | this.getData() | 84 | this.getData() |
97 | } else { | 85 | } else { |
... | @@ -100,36 +88,7 @@ | ... | @@ -100,36 +88,7 @@ |
100 | }, | 88 | }, |
101 | //获取表格数据 | 89 | //获取表格数据 |
102 | async getData () { | 90 | async getData () { |
103 | this.loading = true; | ||
104 | var reqData = { | ||
105 | [this.defaultProps.page]: this.currentPage, | ||
106 | [this.defaultProps.pageSize]: this.pageSize, | ||
107 | [this.defaultProps.keyword]: this.keyword | ||
108 | } | ||
109 | Object.assign(reqData, this.formData) | ||
110 | // var res = await this.apiObj.get(reqData); | ||
111 | let res = { | ||
112 | code: 200, | ||
113 | data: { | ||
114 | total: 2, rows: [ | ||
115 | { | ||
116 | user: 11111111111, | ||
117 | id: 111111111111 | ||
118 | }, | ||
119 | { | ||
120 | user: 2222222222222, | ||
121 | id: 22222222222 | ||
122 | } | ||
123 | ] | ||
124 | }, | ||
125 | message: "" | ||
126 | } | ||
127 | var parseData = config.parseData(res) | ||
128 | this.tableData = parseData.rows; | ||
129 | this.total = parseData.total; | ||
130 | this.loading = false; | ||
131 | //表格默认赋值 | 91 | //表格默认赋值 |
132 | this.$nextTick(() => { | ||
133 | if (this.multiple) { | 92 | if (this.multiple) { |
134 | this.defaultValue.forEach(row => { | 93 | this.defaultValue.forEach(row => { |
135 | var setrow = this.tableData.filter(item => item[this.defaultProps.value] === row[this.defaultProps.value]) | 94 | var setrow = this.tableData.filter(item => item[this.defaultProps.value] === row[this.defaultProps.value]) |
... | @@ -138,20 +97,15 @@ | ... | @@ -138,20 +97,15 @@ |
138 | } | 97 | } |
139 | }) | 98 | }) |
140 | } else { | 99 | } else { |
100 | if (this.defaultValue) { | ||
141 | var setrow = this.tableData.filter(item => item[this.defaultProps.value] === this.defaultValue[this.defaultProps.value]) | 101 | var setrow = this.tableData.filter(item => item[this.defaultProps.value] === this.defaultValue[this.defaultProps.value]) |
142 | this.$refs.table.setCurrentRow(setrow[0]); | 102 | // this.$refs.table.setCurrentRow(setrow[0]); |
143 | } | 103 | } |
144 | this.$refs.table.setScrollTop(0) | 104 | } |
145 | }) | 105 | // this.$refs.table.setScrollTop(0) |
146 | }, | 106 | }, |
147 | //插糟表单提交 | 107 | //插糟表单提交 |
148 | formSubmit () { | 108 | formSubmit () { |
149 | this.currentPage = 1 | ||
150 | this.keyword = null | ||
151 | this.getData() | ||
152 | }, | ||
153 | //分页刷新表格 | ||
154 | reload () { | ||
155 | this.getData() | 109 | this.getData() |
156 | }, | 110 | }, |
157 | //自动模拟options赋值 | 111 | //自动模拟options赋值 |
... | @@ -162,8 +116,10 @@ | ... | @@ -162,8 +116,10 @@ |
162 | item.currentLabel = item.value[this.defaultProps.label] | 116 | item.currentLabel = item.value[this.defaultProps.label] |
163 | }) | 117 | }) |
164 | } else { | 118 | } else { |
119 | if (this.defaultValue) { | ||
165 | this.$refs.select.selectedLabel = this.defaultValue[this.defaultProps.label] | 120 | this.$refs.select.selectedLabel = this.defaultValue[this.defaultProps.label] |
166 | } | 121 | } |
122 | } | ||
167 | }) | 123 | }) |
168 | }, | 124 | }, |
169 | //表格勾选事件 | 125 | //表格勾选事件 |
... | @@ -207,6 +163,7 @@ | ... | @@ -207,6 +163,7 @@ |
207 | this.defaultValue = row | 163 | this.defaultValue = row |
208 | this.$refs.select.blur() | 164 | this.$refs.select.blur() |
209 | this.autoCurrentLabel() | 165 | this.autoCurrentLabel() |
166 | this.$refs.table.setCurrentRow(row); | ||
210 | this.$emit('update:modelValue', this.defaultValue); | 167 | this.$emit('update:modelValue', this.defaultValue); |
211 | this.$emit('change', this.defaultValue); | 168 | this.$emit('change', this.defaultValue); |
212 | } | 169 | } |
... | @@ -225,14 +182,6 @@ | ... | @@ -225,14 +182,6 @@ |
225 | findRowByKey (value) { | 182 | findRowByKey (value) { |
226 | return this.tableData.find(item => item[this.defaultProps.value] === value) | 183 | return this.tableData.find(item => item[this.defaultProps.value] === value) |
227 | }, | 184 | }, |
228 | filterMethod (keyword) { | ||
229 | if (!keyword) { | ||
230 | this.keyword = null; | ||
231 | return false; | ||
232 | } | ||
233 | this.keyword = keyword; | ||
234 | this.getData() | ||
235 | }, | ||
236 | // 触发select隐藏 | 185 | // 触发select隐藏 |
237 | blur () { | 186 | blur () { |
238 | this.$refs.select.blur(); | 187 | this.$refs.select.blur(); |
... | @@ -244,7 +193,6 @@ | ... | @@ -244,7 +193,6 @@ |
244 | } | 193 | } |
245 | } | 194 | } |
246 | </script> | 195 | </script> |
247 | |||
248 | <style scoped> | 196 | <style scoped> |
249 | .sc-table-select__table { | 197 | .sc-table-select__table { |
250 | padding: 12px; | 198 | padding: 12px; | ... | ... |
1 | /* | 1 | /* |
2 | * @Description: | 2 | * @Description: |
3 | * @Autor: renchao | 3 | * @Autor: renchao |
4 | * @LastEditTime: 2023-06-29 11:05:49 | 4 | * @LastEditTime: 2023-07-05 09:48:23 |
5 | */ | 5 | */ |
6 | //表格选择器配置 | 6 | //表格选择器配置 |
7 | 7 | ||
... | @@ -9,17 +9,12 @@ export default { | ... | @@ -9,17 +9,12 @@ export default { |
9 | pageSize: 10, //表格每一页条数 | 9 | pageSize: 10, //表格每一页条数 |
10 | parseData: function (res) { | 10 | parseData: function (res) { |
11 | return { | 11 | return { |
12 | data: res.data, | 12 | data: res.data |
13 | rows: res.data.rows, //分析行数据字段结构 | ||
14 | total: res.data.total, //分析总数字段结构 | ||
15 | msg: res.message, //分析描述字段结构 | ||
16 | code: res.code //分析状态字段结构 | ||
17 | } | 13 | } |
18 | }, | 14 | }, |
19 | request: { | 15 | request: { |
20 | page: 'page', //规定当前分页字段 | 16 | page: 'page', //规定当前分页字段 |
21 | pageSize: 'pageSize', //规定一页条数字段 | 17 | pageSize: 'pageSize', //规定一页条数字段 |
22 | keyword: 'keyword' //规定搜索字段 | ||
23 | }, | 18 | }, |
24 | props: { | 19 | props: { |
25 | label: 'label', //映射label显示字段 | 20 | label: 'label', //映射label显示字段 | ... | ... |
This diff is collapsed.
Click to expand it.
1 | <!-- | 1 | <!-- |
2 | * @Description: | 2 | * @Description: |
3 | * @Autor: renchao | 3 | * @Autor: renchao |
4 | * @LastEditTime: 2023-07-04 16:08:03 | 4 | * @LastEditTime: 2023-07-05 09:55:42 |
5 | --> | 5 | --> |
6 | <template> | 6 | <template> |
7 | <div class="clxx"> | 7 | <div class="clxx"> |
... | @@ -67,7 +67,7 @@ | ... | @@ -67,7 +67,7 @@ |
67 | ...mapGetters(["dictData"]) | 67 | ...mapGetters(["dictData"]) |
68 | }, | 68 | }, |
69 | created () { | 69 | created () { |
70 | this.ableOperation = this.$parent.currentSelectTab.ableOperation | 70 | this.ableOperation = this.$parent?.currentSelectTab?.ableOperation || false |
71 | this.clmlInitList(1) | 71 | this.clmlInitList(1) |
72 | }, | 72 | }, |
73 | methods: { | 73 | methods: { | ... | ... |
1 | /* | 1 | /* |
2 | * @Description: | 2 | * @Description: |
3 | * @Autor: renchao | 3 | * @Autor: renchao |
4 | * @LastEditTime: 2023-05-24 14:42:24 | 4 | * @LastEditTime: 2023-07-05 09:58:31 |
5 | */ | 5 | */ |
6 | import { getForm } from "../flowform"; | 6 | import { getForm } from "../flowform"; |
7 | import { getHomeNoticeList } from "@/api/home.js" | 7 | import { getHomeNoticeList } from "@/api/home.js" |
... | @@ -38,6 +38,7 @@ export default { | ... | @@ -38,6 +38,7 @@ export default { |
38 | for (let item of this.tabList) { | 38 | for (let item of this.tabList) { |
39 | if (item.value === tabname) { | 39 | if (item.value === tabname) { |
40 | this.currentSelectTab = item | 40 | this.currentSelectTab = item |
41 | console.log(item, 'item11111111111'); | ||
41 | break; | 42 | break; |
42 | } | 43 | } |
43 | } | 44 | } | ... | ... |
-
Please register or sign in to post a comment