36176622 by renchao@pashanhoo.com

style:table组件完成

1 parent baaf0b60
1 { 1 {
2 "TITLE": "不动产登记系统", 2 "TITLE": "不动产登记系统",
3 "SERVERAPI": "/bdcdj", 3 "SERVERAPI": "/bdcdj-th",
4 "IDCARDURL": "http://127.0.0.1:33088/function=get_idcard&readnew=0" 4 "IDCARDURL": "http://127.0.0.1:33088/function=get_idcard&readnew=0"
5 } 5 }
......
...@@ -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显示字段
......
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 }
......