vue中的权限树展示

Tree 树形控件

用清晰的层级结构展示信息，可展开或折叠。

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

        <script>
        import { rolesGet } from "@/http/request";
        export default {
          data() {
            return {
              data: [],
              defaultProps: {
                children: "children",
                /* 第一种写法直接在data中添加一个子集同名的属性渲染 */
                /* label: "authName", */
                    label方法可以返回你要渲染的数据的名字到底叫什么出现找不到名字的
                    原因就是data后面的名字不符那么我们可以这样,采用三目运算法则 如果
                    data.authName能渲染数据就用data.authName,如果渲染不了，就采用
                    data.authName :data.roleName

                label: function(i){
                  return i.authName?i.authName:i.roleName
                }
              },
            };
          },
          methods: {
              handleNodeClick(data) {
                console.log(data);
              }
          },
          created() {
            rolesGet("roles").
            then((res) => {
              let {data}=res.data
              /* 第一种方法直接改变data中的数据给他子集同名 */
              /* data.forEach(r=>{
                r.authName=r.roleName
              }) */
              this.data=data
              console.log(data);
            });
          },
        };
        </script>
        

  2  适用于需要选择层级时使用。