子组件内有复选框,选中记录一直存在,解决方法销毁重建组件
<!-- 销毁重建组件 使用v-if editOrderible是编辑订单的显示隐藏-->
<commontMaster ref="commont" v-if="editOrderible"></commontMaster>
时间选择器的选中和清空
<a-form-item label="日期:" style="margin-right:100px">
//双向绑定一个data,该变量会自动赋值,清空的时候给他赋值''
<a-month-picker v-model="times" placeholder="请选择月份" @change="onChangeMonth" style="width: 200px"/>
</a-form-item>
<a-form-item label="师傅负责人:">
<a-select v-model="masterId" default-value="" style="width: 200px">
<a-select-option :value="item.userId" v-for="(item, i) in masterList" :key="i">
{
{
item.userName }}
</a-select-option>
</a-select>
</a-form-item>
onChangeMonth (date, dateString) {
console.log(date, dateString)
// 赋值的时候需要另一个变量接受,不能使用v-model的变量,它会自动赋值
this.time = dateString
},
多选框选中取消,收集所有数据
<template>
<div class="bg-white">
<!-- 多选框 -->
<a-checkbox-group @change="onChange" style="width:100%;" v-model="tab">
<a-row style="width:50%;">
<a-col :span="8">
<a-checkbox value="A" :checked="true" @change="radio">
A
</a-checkbox>
</a-col>
<a-col :span="8">
<a-checkbox value="B" @change="radio">
B
</a-checkbox>
</a-col>
<a-col :span="8">
<a-checkbox value="C" @change="radio">
C
</a-checkbox>
</a-col>
</a-row>
</a-checkbox-group>
<!-- tab表单 -->
<a-tabs default-active-key="A" @change="callback">
<a-tab-pane :key="i" :tab="i" v-for="(item,i) in info" >
<div>姓名:<a-input placeholder="Basic usage" v-model="item.name" /></div>
<div>年龄:<a-input placeholder="Basic usage" v-model="item.age"/></div>
<div>爱好:<a-input placeholder="Basic usage" v-model="item.like"/></div>
</a-tab-pane>
</a-tabs>
<button @click="confirm()">确定</button>
</div>
</template>
<script>
export default {
data () {
return {
value: 1,
tab: ['A'],
list: {
'A': {
name: '',
age: '',
like: '',
show: true
},
'B': {
name: '',
age: '',
like: '',
show: false
},
'C': {
name: '',
age: '',
like: '',
show: false
} }
}
},
computed: {
info () {
const obj = {
}
for (var k in this.list) {
if (this.list[k].show) {
obj[k] = this.list[k]
}
}
return obj
}
},
methods: {
// onChange (checkedValues) {
// this.tab = checkedValues
// },
radio (e) {
this.$set(this.list[e.target.value], 'show', e.target.checked)
},
confirm () {
console.log(this.info)
}
}
}
</script>
<style scoped lang="less">
.bg-white{
background: white;
}
</style>
页面切换顶部进度条展示
npm install --save nprogress
// router.js
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
router.beforeEach((to, from, next) => {
NProgress.start()
next()
})
router.afterEach(() => {
NProgress.done()
})
// app.vue
#nprogress .bar {
background: red !important; //自定义颜色
}