style:下拉表格组件得修改
Showing
4 changed files
with
18 additions
and
22 deletions
| ... | @@ -4,7 +4,7 @@ | ... | @@ -4,7 +4,7 @@ |
| 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-07-05 10:39:17 | 7 | * @LastEditTime: 2023-07-27 14:49:53 |
| 8 | --> | 8 | --> |
| 9 | 9 | ||
| 10 | <template> | 10 | <template> |
| ... | @@ -32,7 +32,7 @@ | ... | @@ -32,7 +32,7 @@ |
| 32 | import config from "./tableSelect"; | 32 | import config from "./tableSelect"; |
| 33 | export default { | 33 | export default { |
| 34 | props: { | 34 | props: { |
| 35 | modelValue: null, | 35 | value: null, |
| 36 | apiObj: { type: Object, default: () => { } }, | 36 | apiObj: { type: Object, default: () => { } }, |
| 37 | placeholder: { type: String, default: "请选择" }, | 37 | placeholder: { type: String, default: "请选择" }, |
| 38 | size: { type: String, default: "small" }, | 38 | size: { type: String, default: "small" }, |
| ... | @@ -63,9 +63,10 @@ | ... | @@ -63,9 +63,10 @@ |
| 63 | computed: { | 63 | computed: { |
| 64 | }, | 64 | }, |
| 65 | watch: { | 65 | watch: { |
| 66 | modelValue: { | 66 | value: { |
| 67 | handler () { | 67 | handler () { |
| 68 | this.defaultValue = this.modelValue | 68 | this.defaultValue = this.value |
| 69 | console.log(this.value, 'this.value'); | ||
| 69 | this.autoCurrentLabel() | 70 | this.autoCurrentLabel() |
| 70 | }, | 71 | }, |
| 71 | deep: true | 72 | deep: true |
| ... | @@ -73,7 +74,7 @@ | ... | @@ -73,7 +74,7 @@ |
| 73 | }, | 74 | }, |
| 74 | mounted () { | 75 | mounted () { |
| 75 | this.defaultProps = Object.assign(this.defaultProps, this.props); | 76 | this.defaultProps = Object.assign(this.defaultProps, this.props); |
| 76 | this.defaultValue = this.modelValue | 77 | this.defaultValue = this.value |
| 77 | this.autoCurrentLabel() | 78 | this.autoCurrentLabel() |
| 78 | }, | 79 | }, |
| 79 | methods: { | 80 | methods: { |
| ... | @@ -149,7 +150,7 @@ | ... | @@ -149,7 +150,7 @@ |
| 149 | this.defaultValue.splice(this.defaultValue.findIndex(item => item[this.defaultProps.value] == row[this.defaultProps.value]), 1) | 150 | this.defaultValue.splice(this.defaultValue.findIndex(item => item[this.defaultProps.value] == row[this.defaultProps.value]), 1) |
| 150 | } | 151 | } |
| 151 | this.autoCurrentLabel() | 152 | this.autoCurrentLabel() |
| 152 | this.$emit('update:modelValue', this.defaultValue); | 153 | this.$emit('update:value', this.defaultValue); |
| 153 | this.$emit('change', this.defaultValue); | 154 | this.$emit('change', this.defaultValue); |
| 154 | }, | 155 | }, |
| 155 | /** | 156 | /** |
| ... | @@ -175,7 +176,7 @@ | ... | @@ -175,7 +176,7 @@ |
| 175 | }) | 176 | }) |
| 176 | } | 177 | } |
| 177 | this.autoCurrentLabel() | 178 | this.autoCurrentLabel() |
| 178 | this.$emit('update:modelValue', this.defaultValue); | 179 | this.$emit('update:value', this.defaultValue); |
| 179 | this.$emit('change', this.defaultValue); | 180 | this.$emit('change', this.defaultValue); |
| 180 | }, | 181 | }, |
| 181 | /** | 182 | /** |
| ... | @@ -191,7 +192,7 @@ | ... | @@ -191,7 +192,7 @@ |
| 191 | this.$refs.select.blur() | 192 | this.$refs.select.blur() |
| 192 | this.autoCurrentLabel() | 193 | this.autoCurrentLabel() |
| 193 | this.$refs.table.setCurrentRow(row); | 194 | this.$refs.table.setCurrentRow(row); |
| 194 | this.$emit('update:modelValue', this.defaultValue); | 195 | this.$emit('update:value', this.defaultValue); |
| 195 | this.$emit('change', this.defaultValue); | 196 | this.$emit('change', this.defaultValue); |
| 196 | } | 197 | } |
| 197 | }, | 198 | }, |
| ... | @@ -203,14 +204,14 @@ | ... | @@ -203,14 +204,14 @@ |
| 203 | removeTag (tag) { | 204 | removeTag (tag) { |
| 204 | var row = this.findRowByKey(tag[this.defaultProps.value]) | 205 | var row = this.findRowByKey(tag[this.defaultProps.value]) |
| 205 | this.$refs.table.toggleRowSelection(row, false); | 206 | this.$refs.table.toggleRowSelection(row, false); |
| 206 | this.$emit('update:modelValue', this.defaultValue); | 207 | this.$emit('update:value', this.defaultValue); |
| 207 | }, | 208 | }, |
| 208 | /** | 209 | /** |
| 209 | * @description: 清空后的回调 | 210 | * @description: 清空后的回调 |
| 210 | * @author: renchao | 211 | * @author: renchao |
| 211 | */ | 212 | */ |
| 212 | clear () { | 213 | clear () { |
| 213 | this.$emit('update:modelValue', this.defaultValue); | 214 | this.$emit('update:value', this.defaultValue); |
| 214 | }, | 215 | }, |
| 215 | /** | 216 | /** |
| 216 | * @description: 关键值查询表格数据行 | 217 | * @description: 关键值查询表格数据行 | ... | ... |
| 1 | /* | 1 | /* |
| 2 | * @Description: | 2 | * @Description: |
| 3 | * @Autor: renchao | 3 | * @Autor: renchao |
| 4 | * @LastEditTime: 2023-07-05 09:48:23 | 4 | * @LastEditTime: 2023-07-27 14:44:38 |
| 5 | */ | 5 | */ |
| 6 | //表格选择器配置 | 6 | //表格选择器配置 |
| 7 | 7 | ||
| 8 | export default { | 8 | export default { |
| 9 | pageSize: 10, //表格每一页条数 | ||
| 10 | parseData: function (res) { | 9 | parseData: function (res) { |
| 11 | return { | 10 | return { |
| 12 | data: res.data | 11 | data: res.data |
| 13 | } | 12 | } |
| 14 | }, | 13 | }, |
| 15 | request: { | ||
| 16 | page: 'page', //规定当前分页字段 | ||
| 17 | pageSize: 'pageSize', //规定一页条数字段 | ||
| 18 | }, | ||
| 19 | props: { | 14 | props: { |
| 20 | label: 'label', //映射label显示字段 | 15 | label: 'label', //映射label显示字段 |
| 21 | value: 'value', //映射value值字段 | 16 | value: 'value', //映射value值字段 | ... | ... |
| ... | @@ -240,14 +240,13 @@ | ... | @@ -240,14 +240,13 @@ |
| 240 | </el-col> | 240 | </el-col> |
| 241 | <el-col :span="8"> | 241 | <el-col :span="8"> |
| 242 | <el-form-item label="竣工时间:"> | 242 | <el-form-item label="竣工时间:"> |
| 243 | <el-date-picker | 243 | <el-date-picker |
| 244 | v-model="ruleForm.fdcq2.jgsj" | 244 | v-model="ruleForm.fdcq2.jgsj" |
| 245 | class="width100" | 245 | class="width100" |
| 246 | type="date" | 246 | type="date" |
| 247 | placeholder="选择日期" | 247 | placeholder="选择日期" |
| 248 | value-format="yyyy-MM-dd HH:mm:ss" | 248 | value-format="yyyy-MM-dd HH:mm:ss" |
| 249 | format="yyyy-MM-dd" | 249 | format="yyyy-MM-dd"> |
| 250 | > | ||
| 251 | </el-date-picker> | 250 | </el-date-picker> |
| 252 | </el-form-item> | 251 | </el-form-item> |
| 253 | </el-col> | 252 | </el-col> |
| ... | @@ -500,6 +499,7 @@ | ... | @@ -500,6 +499,7 @@ |
| 500 | init(this.propsParam).then((res) => { | 499 | init(this.propsParam).then((res) => { |
| 501 | if (res.code == 200) { | 500 | if (res.code == 200) { |
| 502 | this.ruleForm = res.result; | 501 | this.ruleForm = res.result; |
| 502 | console.log(this.ruleForm, 'this.ruleForm'); | ||
| 503 | let djlx = this.ruleForm.qlxx.djlx; | 503 | let djlx = this.ruleForm.qlxx.djlx; |
| 504 | if (djlx == null || djlx == 100) { | 504 | if (djlx == null || djlx == 100) { |
| 505 | this.ssqlxxshow = false; | 505 | this.ssqlxxshow = false; | ... | ... |
| ... | @@ -9,8 +9,8 @@ | ... | @@ -9,8 +9,8 @@ |
| 9 | <el-form | 9 | <el-form |
| 10 | :model="ruleForm" | 10 | :model="ruleForm" |
| 11 | :rules="rules" | 11 | :rules="rules" |
| 12 | :class="{readonly: editDisabled }" | 12 | :class="{readonly: editDisabled }" |
| 13 | class="loadingtext" | 13 | class="loadingtext" |
| 14 | ref="ruleForm" | 14 | ref="ruleForm" |
| 15 | :label-position="flag ? 'top' : ''" | 15 | :label-position="flag ? 'top' : ''" |
| 16 | :inline="flag" | 16 | :inline="flag" | ... | ... |
-
Please register or sign in to post a comment