1. 程式人生 > 其它 >Element UI Tree 樹形控制元件(可選擇),如果子級有值,父級禁用的兩種操作

Element UI Tree 樹形控制元件(可選擇),如果子級有值,父級禁用的兩種操作

總結了兩種方法:

一、父級的複選框禁用

<el-tree
    :data="deptOptions"
    node-key="id"
    :props="defaultProps"
    :expand-on-click-node="true"
    :filter-node-method="filterNode"
    :check-strictly="true"
    show-checkbox
    ref="tree"
    @check="handleNodeClick"
/>

<script>
    export default
{ data:{ defaultProps:{ children:'children', label:'name', disabled:function(data,node){ if(data.children&&data.children.length>0){ return true }
else{ return false } } } }, methods:{ handleNodeClick(data,checked, node){ if(checked){ this.$refs.tree.setCheckedNodes([data]); } }, } }
</script>

二、隱藏父級的複選框,css大法好嘢,真的好嘢

<el-tree
  :data="deptOptions"
  node-key="id"
  :props="defaultProps"
  :expand-on-click-node="true"
  :filter-node-method="filterNode"
  :check-strictly="true"
  show-checkbox
  ref="tree"
  @check="handleNodeClick"
/>

<style lang="scss" scoped>
::v-deep .el-tree {
  // 不可全選樣式
  .el-tree-node {
    .is-leaf + .el-checkbox .el-checkbox__inner {
      display: inline-block;
    }
    .el-checkbox .el-checkbox__inner {
      display: none;
    }
  }
}
</style>