vue element ui树形控件

 defaultProps: {
        children: "children",
        label: "name"
}, //格式绑定
  memberlist: [], //列表
  permissionIds: [], // 半勾选+全勾选
  checkPermissionIds: [], //全勾选
<el-tree
      ref="tree"
      :data="memberlist"
      :default-checked-keys="checkPermissionIds"
      :props="defaultProps"
      node-key="id"
      show-checkbox
      @check-change="handleCheckChange"
 ></el-tree>
 handleCheckChange() {
      this.checkPermissionIds = this.$refs.tree.getCheckedKeys();
      console.log(this.checkPermissionIds, "全勾选");
      this.permissionIds = [
        ...this.$refs.tree.getCheckedKeys(),
        ...this.$refs.tree.getHalfCheckedKeys()
      ];
      console.log(this.permissionIds, "半勾选+全勾选");
    },
 //清除上次默认勾选
 closeDialog() {
      this.$refs.tree.store.defaultCheckedKeys = [];
 },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element-ui提供了一个树形控件,可以在前端页面展示树状结构的数据。您可以通过以下步骤来使用element树形控件: 1. 首先,在您的项目中安装并引入element-ui库。可以使用npm或yarn进行安装: ``` npm install element-ui ``` 然后在需要使用树形控件的文件中引入element-ui: ```javascript import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); ``` 2. 创建一个树形控件的数据源,通常是一个数组对象,每个对象代表一个节点,其中包含了节点的唯一标识符、显示文本、子节点等信息。 3. 在Vue组件中使用el-tree标签,并绑定数据源和其他属性: ```html <el-tree :data="treeData" :props="defaultProps"></el-tree> ``` 其中,`:data`属性绑定了您创建的数据源,`:props`属性可以配置节点的字段名,如"id"、"label"等。 4. 如果需要处理节点的选择事件或展开/折叠事件,可以通过监听el-tree组件的相关事件来实现: ```html <el-tree @node-click="handleNodeClick" @node-expand="handleNodeExpand" :data="treeData" :props="defaultProps"></el-tree> ``` 在Vue组件的methods中定义事件处理函数即可: ```javascript methods: { handleNodeClick(data) { console.log(data); }, handleNodeExpand(data, node, instance) { console.log(data); } } ``` 以上就是使用element-ui树形控件的基本步骤,您可以根据实际需求进行进一步的样式和功能定制。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值