element实现折叠面板,element 侧边栏折叠
随着功能的增加，表格操作栏中的功能按钮也更多了，需要折叠起来。主要介绍了在element中显示和折叠表格操作按钮的实现实例，有一定的参考价值，有兴趣的可以看看。
目录
我们先来看看实施效果。1.遇到的问题。解决方案3。用法4。例子
先来看实现效果。
1.遇到问题
随着功能的增加，工作台操作栏中的功能按钮数量增加，操作栏长度增加，导致外观不美观。因此，如果产品需要三个以上的按钮，多余的按钮将隐藏在一个按钮中。单击此按钮可展开和折叠其余的按钮。
这个需求在UI组件库中没有实现。所以要求自己去实现它。
2.解决思路
因为之前动作栏按钮的实现是直接写在视图模板中的。所以我想知道是否可以通过修改UI组件库中表格组件接收到的数据进行处理和显示。经过研究发现是通过编译生成VDOM来处理的，所以很难直接处理VDOM，这种方法是行不通的。
后来想到可以先把按钮定义成数据数组，处理后再渲染操作按钮。这个方法经过尝试是可行的。按钮一般有按钮图标、按钮名称、按钮权限、按钮点击等功能。所以最后，每个按钮都被定义为下面的数据结构。
[{
Icon: edit ，//icon icon String类型，必需
Name: edit ，//图标标题必选字符串
Handler: Function (row，scope) {}，//icon点击操作方法返回两个参数行数据和作用域数据所需的函数。
V_if: Function (row，scope) {}//图标是否被操作栏包含。条件方法返回两个参数行数据和范围数据。返回值为真则包含，为假则不包含。非必需功能。
v _ nobtn: assets manage _ account manage //图标是否被操纵包含一个条件字符串。
}]
其中v_if和v_noBtn用于处理按钮权限。处理程序是点击触发函数。最后，通过权限过滤的按钮数量来判断按钮是否需要隐藏。大于三个和不大于三个的按钮分别呈现为相应的视图。这时，又出现了一个问题。由于表格组件样式的限制，用于显示和隐藏按钮的弹出框不能超过当前列的长度。超过了就藏起来。这个问题本来是想通过设置定位来实现的，但是由于UI组件的一些限制，无法实现。所以最后一个想法就是这个弹出DOM是可以呈现在表内还是表外div。这解决了问题。我发现UI库中有一个Popper组件。查了一下源代码，发现是直接渲染在正文里的，这正是我想要的。修改vue-popper.js，如果获得了props则在对应的元素节点中渲染，如果没有则在正文中渲染。
if (this.appendToTable){
document . query selector(this . appendtotable)。appendChild(this . popper elm)；
} else if (this.appendToBody){
document . body . appendchild(this . popper elm)；
}
这样，这个需求就实现了。
3.用法
该组件接收三个props:btnData(动作按钮数据对象数组)、scope(范围对象scope(表)和option配置项。
//默认属性：
btnData:[]，
选项：{
IsHidden:true，//是否开启动作栏隐藏设置，默认开启。
ShowNum:3//如果isHidden为true，则大于3的数字将被隐藏。默认值为3。
已附加：。s-table ，//将浮动条添加到相应的id或类节点。或者。xxx。传递空字符串会添加到正文中。
触发器： click ，//触发器模式，传递值查看Popper UI组件的触发器属性。
位置：“左”//方向。传递值以查看Popper UI组件的placement属性。
}
btnData数组中的对象接收5个属性：
{
Icon: edit ，//icon icon String类型，必需
Name: edit ，//图标标题必选字符串
Handler: Function (row，scope) {}，//icon点击操作方法返回两个参数行数据和作用域数据所需的函数。
v_if: function (row，scope) {}//图标是否被操作栏包含条件方法，返回两个参数行数据和范围数据，返回值为真实的就被包含，假的不会被包含非必填功能
v _ noBtn:资产管理_账户管理//图标是否被操作栏包含条件字符串
},
其中v_if和v_noBtn只要有一个返回值为错误的当前行操作栏中就不包含。
4.实例
此处代码和元素标签上有些差异。是因为对元素进行了二次处理。除了标签改变外，其余大多是没改变的。组件可以参考下，按照上面的思路和具体需求自己去写一个。
s表
s表列标签=操作固定=右
模板槽-范围="范围"
按钮集：scope= scope :BTN数据= BTN数据():option=表选项/按钮集
/模板
/s-表-列
/s-表
脚本
从" @/组件/tableHandleHidden/按钮集"导入按钮集；
导出默认值{
组件：{
按钮集
}
data() {
返回{
表格选项：{
伊西登：是的，
showNum: 3，
appendId:"# realpagetable _ 1 "，
触发器："咔嚓",
位置："左侧"
}
}
},
方法：{
btnData() {
设vm=这个
返回[
{
图标："眼睛",
名称： 查看资产详情，
资产管理视图资产，
处理程序：函数（行，范围){
vm.gotoAssetDetail(row)
}
},
{
图标："编辑",
名称： 编辑，
处理程序：函数（行，范围){
VM。curuuid=范围。划。uuid
虚拟机.$路由器。push(` assets _ list/assets it/$ { VM。curuuid }/0 `)；
},
v_if:函数（行，范围){
返回VM。isconfiggadmincheck(范围。划。monitoritcomp) VM。judgerolebtn(资产管理_编辑资产)
}
}
]
}
}
}
/脚本
@/components/tableHandleHidden/buttonSet组件：
模板
div class=buttonSet_all
div v-if=data.length===1
i v-for=(item，index)in data[0]:key= index :class= ` icon font icon-$ { item。icon } ` @ click= item。处理程序(范围。行，范围，$event) :title=item.name/i
/div
div v-else-if=data.length1
i v-for=(obj，index)in data[0]:key= index :class= ` icon font icon-$ { obj .icon } ` @ click= obj。处理程序(范围。行，范围，$event) :title=obj.name/i
s-popover
popper-class=buttonSet_style
:append-to-table=选项。appendid？option.appendId:
:ref=popover scope.row.uuid
:placement=option.placement？选项.位置："左"
:trigger=option.trigger？option.trigger:单击
ul class= s下拉菜单按钮-机顶盒style= width:120 px；
李style= overflow:hidden；文本溢出：省略号；空白：nowrap左填充：10px 右填充：10px class= s-drop down-item v-for=(obj，index)in data[1]:key= index @ click= obj。处理程序(范围。行，范围，$event)
I:class= ` icon font icon-$ { obj .icon } ` :title= obj。name style= font-size:14px；margin-right:3px；颜色：#199FED/i
span:title= obj。名称“{ obj。name } }/span
/李
/ul
I class= icon font icon-more slot= reference /I
/s-popover
/div
/div
/模板
脚本
//从"洛达什"导入{ chunk }；
导出默认值{
道具：{
btnData: {
类型：数组，
默认值：函数(){
return []
}
},
范围：{
类型：对象
},
选项：{
类型：对象，
默认值：函数(){
返回{
伊西登：是的，
showNum: 3，
appendId:“.s表，
触发器："咔嚓",
位置："左侧"
}
}
}
},
data() {
返回{
数据：[]
}
},
已计算：{},
已创建(){
这个。init()；
},
观察：{
范围（值){
这个。init()；
}
},
方法：{
init() {
设arr=[]；
this.btnData.map(item={
if (item.v_if item.v_noBtn) {
if (item.v_if(this.scope.row，this。范围)这个。权限判断(项。v _ noBtn))arr。推(项)；
} else if (item.v_if！item.v_noBtn) {
if (item.v_if(this.scope.row，this。范围))arr。推(项)；
} else if(！item.v_if item.v_noBtn) {
如果(这个。权限判断(项。v _ noBtn))arr。推(项)；
}否则{
数组推送(项目);
}
})
如果(arr。长度这个。选项。展示这个。选项。是隐藏的){
this.data=[arr.slice(0，this.option.showNum)，arr。切片(这个。选项。shownum)]；
}否则{
这个。data=[arr]；
}
},
权限判断（值){
让authMenu=this .$ store。吸气剂。授权菜单；//获取所有一级目录
对于(授权菜单的字母项){
if (item.keyWord===value) {
返回真实的
}
}
返回错误的
}
},
销毁前(){
//eslint-disable-next-line no-undef
$(.button set _ style’).移除()
}
}
/脚本
style lang=stylus 。buttonSet_style{
填充：10px 0；
}。按钮机顶盒。下拉列表项目：悬停我{
颜色#fff！重要的
}
//.buttonSet_style{
//填充6px 8px
//color:# 199 fed；//#6da0cb
//背景：# fff//# 19232 e；
//.弹出箭头：在{
//border-left-color:#fff！重要；
//}
//.iconfont{
//font-size:20px；
//光标：指针；
//margin:0 2px；
//}
//}
/风格
到此这篇关于元素中桌子操作按钮展示与折叠的实现示例的文章就介绍到这了，更多相关元素表按钮展示折叠内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。