md
This commit is contained in:
linfso
parent
5f2bad368e
commit
1690d5607b
86
src/components/CityPicker/indexA.vue
Normal file
86
src/components/CityPicker/indexA.vue
Normal file
@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<el-cascader
|
||||
ref="cascader"
|
||||
:props="casProps"
|
||||
:options="casData"
|
||||
filterable
|
||||
clearable
|
||||
placeholder="请选择"
|
||||
@change="handleCasChange">
|
||||
</el-cascader>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'cascaderTest',
|
||||
data () {
|
||||
return {
|
||||
// 获取数据
|
||||
casData: [],
|
||||
casProps: {
|
||||
value: 'casId',
|
||||
label: 'casName',
|
||||
// 懒加载
|
||||
lazy: true, // 必须为true
|
||||
lazyLoad:this.lazyLoad
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
// 懒加载获取数据
|
||||
lazyLoad(node,resolve){
|
||||
const level = node.level
|
||||
var url
|
||||
if (level === 0) {
|
||||
url = '接口地址'
|
||||
}
|
||||
if (level === 1) {
|
||||
url = '接口地址'
|
||||
}
|
||||
if (level === 2) {
|
||||
url = '接口地址'
|
||||
}
|
||||
// 请求看项目具体请求格式
|
||||
this.reqM1Service(url, '', "get")
|
||||
.then(res => {
|
||||
let data
|
||||
if (level === 0) {
|
||||
data = res.data.data
|
||||
// 判断data是否有数据
|
||||
if(data.length == 0){
|
||||
return this.$message.error("获取数据失败！")
|
||||
}else{
|
||||
data.forEach(item => {
|
||||
this.value = item.casId
|
||||
this.label = item.casName
|
||||
})
|
||||
}
|
||||
}
|
||||
if (level === 1) {
|
||||
data = res.data.data
|
||||
if(data.length == 0){
|
||||
return this.$message.error("获取数据失败！")
|
||||
}
|
||||
data.forEach(item => {
|
||||
item.value = item.casId
|
||||
item.label = item.casName
|
||||
})
|
||||
}
|
||||
if (level === 2) {
|
||||
data = res.data.data
|
||||
if(data.length == 0){
|
||||
return this.$message.error("获取数据失败！")
|
||||
}
|
||||
data.forEach(item => {
|
||||
item.value = item.casId
|
||||
item.label = item.casName
|
||||
//将相关值赋值到选择器上
|
||||
item.leaf = level >= 2
|
||||
})
|
||||
}
|
||||
resolve(data)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
87
src/components/CityPicker/indexD.vue
Normal file
87
src/components/CityPicker/indexD.vue
Normal file
@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<el-select v-model="form.province" placeholder="省" clearable filterable>
|
||||
<el-option
|
||||
v-for="item in provinceIdsOptions"
|
||||
v-bind:key="item.value"
|
||||
v-bind:label="item.label"
|
||||
v-bind:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CitePickerA',
|
||||
data () {
|
||||
return {
|
||||
country:null,
|
||||
province:null,
|
||||
city:null,
|
||||
district:null,
|
||||
town:null,
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
// 懒加载获取数据
|
||||
lazyLoad(node,resolve){
|
||||
const level = node.level
|
||||
var url
|
||||
if (level === 0) {
|
||||
url = '接口地址'
|
||||
}
|
||||
if (level === 1) {
|
||||
url = '接口地址'
|
||||
}
|
||||
if (level === 2) {
|
||||
url = '接口地址'
|
||||
}
|
||||
// 请求看项目具体请求格式
|
||||
this.reqM1Service(url, '', "get")
|
||||
.then(res => {
|
||||
let data
|
||||
if (level === 0) {
|
||||
data = res.data.data
|
||||
// 判断data是否有数据
|
||||
if(data.length == 0){
|
||||
return this.$message.error("获取数据失败！")
|
||||
}else{
|
||||
data.forEach(item => {
|
||||
this.value = item.casId
|
||||
this.label = item.casName
|
||||
})
|
||||
}
|
||||
}
|
||||
if (level === 1) {
|
||||
data = res.data.data
|
||||
if(data.length == 0){
|
||||
return this.$message.error("获取数据失败！")
|
||||
}
|
||||
data.forEach(item => {
|
||||
item.value = item.casId
|
||||
item.label = item.casName
|
||||
})
|
||||
}
|
||||
if (level === 2) {
|
||||
data = res.data.data
|
||||
if(data.length == 0){
|
||||
return this.$message.error("获取数据失败！")
|
||||
}
|
||||
data.forEach(item => {
|
||||
item.value = item.casId
|
||||
item.label = item.casName
|
||||
//将相关值赋值到选择器上
|
||||
item.leaf = level >= 2
|
||||
})
|
||||
}
|
||||
resolve(data)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
78
src/components/FormPanel/index.vue
Normal file
78
src/components/FormPanel/index.vue
Normal file
@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<div id="formPanel">
|
||||
<slot></slot>
|
||||
<el-col :span="24">
|
||||
<el-divider content-position="right" >更多信息[+]</el-divider>
|
||||
</el-col>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Form, FormItem, Button } from 'element-ui'
|
||||
export default {
|
||||
name: 'FormPanel',
|
||||
components: { Form, FormItem, Button },
|
||||
props: {
|
||||
// 最大展示数，默认3个，超过则隐藏，为0时不限制
|
||||
maxShow: {
|
||||
type: Number,
|
||||
default: 3,
|
||||
},
|
||||
labelWidth: {
|
||||
type: String,
|
||||
default: '100px',
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'small',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
collapsiable: false,
|
||||
fold: false,
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
// 通过最大显示个数控制展开/折叠
|
||||
if (this.maxShow > 0) {
|
||||
this.minShowCtrol()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
shiftCollapsiable() {
|
||||
this.fold = !this.fold
|
||||
|
||||
this.minShowCtrol()
|
||||
},
|
||||
// 通过maxShow控制元素显示/折叠
|
||||
minShowCtrol() {
|
||||
const group = window.document.querySelectorAll(`#formPanel .el-form-item.el-form-item--${this.size}`)
|
||||
const len = group?.length ? group?.length - 1 : 0
|
||||
if (this.maxShow < len) {
|
||||
group.forEach((item, index) => {
|
||||
if (index > this.maxShow - 1 && index < len) {
|
||||
if(!this.fold){
|
||||
item.style.display = 'none';
|
||||
}else{
|
||||
item.style.display = '';
|
||||
}
|
||||
// item.hidden = !this.fold
|
||||
}
|
||||
})
|
||||
this.collapsiable = true
|
||||
} else {
|
||||
this.collapsiable = false
|
||||
}
|
||||
},
|
||||
handleQuery() {
|
||||
this.$emit('search')
|
||||
},
|
||||
handleReset() {
|
||||
this.$emit('reset')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user