element-ui 使用(3)

element-ui 使用(3)

记录近期所使用element-ui组件的过程
使用过程中用到的element文档
https://element.eleme.cn/#/zh-CN/component/installation

7.Tab ,Tabs 标签页

分隔内容上有关联但属于不同类别的数据集合。
Tabs 组件提供了选项卡功能，默认选中第一个标签页

使用:

<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
  </el-tabs>
</template>
<script>
  export default {
    data() {
      return {
        activeName: 'second'
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  };
</script>

Attributes属性

• Tabs属性:
  • value / v-model 绑定值，选中选项卡的 name✨
  • type设置标签风格类型 可选:card/border-card
  • tab-position选项卡所在位置,默认top 可选right/bottom/left
• Tab-pane属性:
  • label选项卡标题
  • name与选项卡绑定值 value 对应的标识符，表示选项卡别名
  • disabled是否禁用
  • closable标签是否可关闭

Events 事件

• tab-clicktab 被选中时触发(被选中的标签 tab 实例)

效果

8. Pagination 分页

当数据量过多时，使用分页分解数据。

使用

  <el-pagination
    layout="prev, pager, next"
    :total="50">
  </el-pagination>

Attributes 属性

• page-size每页显示条目个数，支持 .sync 修饰符 默认10条✨
• total总条目数✨
• current-page当前页数，支持 .sync 修饰符 默认1✨
• prev-text替代图标显示的上一页文字
• next-text替代图标显示的下一页文字

Events事件

• current-changecurrentPage 改变时会触发(当前页)✨
• prev-click用户点击上一页按钮改变当前页后触发(当前页)
• next-click用户点击下一页按钮改变当前页后触发(当前页)

效果

9.Tree 树形控件✨💡

用清晰的层级结构展示信息，可展开或折叠。
可将 Tree 的某些节点设置为默认展开或默认选中
可将 Tree 的某些节点设置为禁用状态

使用

<el-tree :data="data" 
 :props="defaultProps"
 @node-click="handleNodeClick">
</el-tree>

<script>
  export default {
    data() {
      return {
        data: [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    methods: {
      handleNodeClick(data) {
        console.log(data);
      }
    }
  };
</script>

Attributes属性

• data展示数据 类型:数组✨
• node-key每个树节点用来作为唯一标识的属性，整棵树应该是唯一的
• props配置选项{children: 'children', label: 'label'}✨
• default-expand-all是否默认展开所有节点默认false
• check-on-click-node只有点击复选框时才会选中节点。默认false
• check-strictly父子不互相关联 默认false

方法✨

Tree 内部使用了 Node 类型的对象来包装用户传入的数据，用来保存目前节点的状态。 Tree 拥有如下方法：

• getCheckedKeys返回目前被选中的节点的 key 所组成的数组✨
• setCheckedKeys通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性✨
• 使用方法:this.$refs.permTree.getCheckedKeys()

Scoped Slot 作用域插槽✨

自定义树节点的内容，参数为 { node, data }

 <el-tree
   :data="departs"
   :props="{ label: 'name' }"
   :default-expand-all="true"
   :expand-on-click-node="false"
 >
   <template #default="scoped">
     <RewItem
       :rew-node="scoped.data"
     />
   </template>
 </el-tree>

效果