解决: 通过子组件配置$emit,第一个参数时事件名,用于父组件回调,第二个参数是要传给父组件的回调值,然后父组件配置对应的事件即可,例如 1.子组件
......
<div class="handle-button">
<el-form-item>
<el-button type="primary" @click="uploadSubmit('ruleForm')">保存</el-button>
<el-button @click="closeTheModal">取消</el-button>
</el-form-item>
</div>
......
closeTheModal () {
this.$emit('close', false)
}
......
2.父组件
......
<upload-form @close="handleUploadFormModal"></upload-form>
......
handleUploadFormModal: function (data) {
this.uploadShow = data
}
......
参考资料: https://cn.vuejs.org/v2/api/#vm-emit
image.png
解决: 通过带一个$event参数,就时默认的改变值
<el-switch
v-model="scope.row.status"
active-value='1' inactive-value='0'
@change="changeUserStatus($event, scope.row)">
</el-switch>
解决: 例如下面写的过滤在线状态的过滤器,
const myFilter = {
toOnline: function (online) {
switch (online) {
case 'Y':
return '在线';
case 'N':
return '不在线';
default:
return 'NaN';
}
}
}
export default myFilter
也可以使用对象的写法,如下
const myFilter = {
toOnline: function (online) {
let onlineObj = {
Y: '在线',
N: '不在线'
}
return onlineObj[online]
}
}
export default myFilter
写完过滤器,需要在main.js中引入
import myFilter from './config/myFilter'
for (let key in myFilter) {
Vue.filter(key, myFilter[key])
}
参考资料: https://cn.vuejs.org/v2/guide/filters.html#ad
解决: 分页请求可以直接拼接,如下
methods: {
getData: function() {
this.$request({
url: `/api?page=${this.page}&size=${this.size}`
})
}
}
这样写,如果带参多了会很麻烦,所以可以写一个计算属性
data: {
query: {
page: 1,
size:10
}
},
computed: {
queryString: function() {
Object.key(query).filter(key => query[key] !== '')
.map(key => `${key}=${query[key]}`)
.join('&')
}
}
防抖可以使用lodash的_.debounce方法
_.debounce( this.getData(), 800)
参考资料: https://lodash.com/docs/4.17.10#debounce https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join
解决: 直接把popover单独封装成组件,再引入表格即可