|
前言
欢迎大家来到我的博客，请各位看客们点赞、收藏、关注三连！
欢迎大家关注我的知识库，Java之从零开始·语雀
你的关注就是我前进的动力！
CSDN专注于问题解决的博客记录，语雀专注于知识的收集与汇总，包括分享前沿技术。
主体
首先，我想实现ant design vue中的展开和收起，效果如下：  看了几篇博客的实现思路，但都不太满意，我想要按钮那一行不要换行，直接显示在最后一列，具体效果如下： 
实现过程与难点
第一点，就是思路的问题，我先看看display:none会给这几个输入框带来的影响是什么？有没有其他问题，经过测试，想到直接把按钮那一栏全部改成一个局部组件。 我们在使用他时，只需要在多列的最后添加这个子组件。  然后，就是判断它是否隐藏和显示。 好了，主要思路讲解到这里，我们直接上代码。
DOCTYPE html>
Document
@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");
.btnRow {
display: block;
}
.unBtnRow {
display: none;
}
查看
删除
Vue.component('search-button', {
props: {
showAll: {
type: Boolean,
defalut: true
},
},
template: `
查询
重置
下发
{{word}}
`,
computed: {
word: function() {
if(this.showAll == false) {
//对文字进行处理
return "展开搜索";
} else {
return "收起搜索";
}
}
},
mounted() {
/**
* 收起搜索
*/
this.$nextTick(function() {
this.closeSearch();
});
},
methods: {
closeSearch() {
// this.showAll = !this.showAll;
this.$emit('closepop');
console.log('子组件的状态：' + this.showAll)
}
}
});
var app = new Vue({
el: '#app',
data() {
return {
showAll: true,
tableData: [],
//查询条件form
condForm: {
},
condition: '',
xslxoptions: [{
id: "1",
name: "土地"
},
{
id: "2",
name: "房屋"
},
{
id: "3",
name: "矿产"
},
],
options: [{
value: '1',
label: '动态巡查'
}, {
value: '2',
label: '电话举报'
}, {
value: '3',
label: '信访举报'
}, {
value: '4',
label: '媒体曝光'
}, {
value: '5',
label: '其他单位转交'
}, {
value: '6',
label: '其他'
}],
pageIndex: 0,
pageSize: 0,
pageSizes: [20, 50, 100, 200],
totalPage: 0,
// height: window.innerHeight - 200,
}
},
computed:{
tableHeight() {
if (this.showAll) {
return window.innerHeight - 140
} else {
return window.innerHeight - 200
}
}
},
methods: {
closepop() {
this.showAll = !this.showAll;
console.log('父组件的状态：' + this.showAll)
}
},
});
实现起来还是很简单的。 参考博客：展开和收起实现 局部组件和全局组件传值问题
|