角色列表
<template>
? <div>
? ? <el-tree
? ? ? :data="data"
? ? ? :props="defaultProps"
? ? ? @node-click="handleNodeClick"
? ? ></el-tree>
? </div>
</template>
<script>
import { rolesGet } from "@/http/request.js";
export default {
? name: "RolesView",
? data() {
? ? return {
? ? ? data: [],
? ? ? defaultProps: {
? ? ? ? children: "children",
? ? ? ? label:'authName'
? ? ? ? /* label:function(data){
? ? ? ? ? label方法可以返回 你要渲染的數(shù)據(jù)的名字到底叫什么
? ? ? ? ? ? ?出現(xiàn)找不到名字的原因就是data后面的名字不對(duì)
? ? ? ? ? ? ?那么我們可以這樣 采用三步運(yùn)算法則
? ? ? ? ? return data.authName?data.authName:data.roleName
? ? ? ? } */
? ? ? },
? ? };
? },
? created() {
? ? rolesGet("roles")
? ? ? .then((res) => {
? ? ? ? console.log(res);
? ? ? ? let { meta, data } = res.data;
? ? ? ? if (meta.status == 200) {
改變?cè)瓉?lái)的數(shù)據(jù)，把第一層多加一個(gè)authName墓贿，值為roleName的字段?
? ? ? ? ? data.forEach(r=>{
? ? ? ? ? ? r.authName=r.roleName
? ? ? ? ? })
? ? ? ? ? this.data=data
? ? ? ? } else {
? ? ? ? ? this.$message.error(meta.msg);
? ? ? ? }
? ? ? })
? ? ? .catch((err) => {
? ? ? ? console.log(err);
? ? ? });
? },
? methods: {
? ? handleNodeClick(data) {
? ? ? console.log(data);
? ? },
? },
};
列表懶加載
<template>
? <div>
? ? <el-tree
? ? ? :props="props"
? ? ? :load="loadNode"
? ? ? lazy
? ? ? show-checkbox
? ? ? @check-change="handleCheckChange"
? ? >
? ? </el-tree>
? </div>
</template>
<script>
export default {
? name: "RightsView",
? data() {
? ? return {
? ? ? props: {
? ? ? ? label: "name",
? ? ? ? children: "zones",
? ? ? },
? ? ? count: 1,
? ? };
? },
? methods: {
? ? /* 共三個(gè)參數(shù)茧泪，依次為：傳遞給 data 屬性的數(shù)組中該節(jié)點(diǎn)所對(duì)應(yīng)的對(duì)象、節(jié)點(diǎn)本身是否被選中聋袋、節(jié)點(diǎn)的子樹(shù)中是否有被選中的節(jié)點(diǎn) */
? ? handleCheckChange(data, checked, indeterminate) {
? ? ? console.log(data, checked, indeterminate);
? ? },
? ? /* 每點(diǎn)一次都會(huì)執(zhí)行一遍 */
? ? loadNode(node, resolve) {
? ? ? /* 第一層給個(gè)數(shù)組數(shù)據(jù) */
? ? ? if (node.level === 0) {
? ? ? ? return resolve([{ name: "region1" }, { name: "region2" }]);
? ? ? }
? ? ? /* 第5層開(kāi)始不給數(shù)據(jù) */
? ? ? if (node.level > 3) return resolve([]);
? ? ? /* 這個(gè)開(kāi)關(guān)是用來(lái)判斷給誰(shuí)加子數(shù)據(jù)的 */
? ? ? var hasChild;
? ? ? if (node.data.name === "region1") {
? ? ? ? hasChild = true;
? ? ? } else if (node.data.name === "region2") {
? ? ? ? hasChild = false;
? ? ? } else {
? ? ? ? /* 其他的節(jié)點(diǎn)點(diǎn)擊是否有數(shù)據(jù) 是隨機(jī)值
? ? ? ? ? ? ?如果0-1之間的隨機(jī)數(shù)大于0.5則為true队伟，否則為false */
? ? ? ? hasChild = Math.random() > 0.5;
? ? ? }
? ? ? setTimeout(() => {
? ? ? ? var data;
? ? ? ? if (hasChild) {
? ? ? ? ? data = [
? ? ? ? ? ? {
? ? ? ? ? ? ? name: "zone" + this.count++,
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? name: "zone" + this.count++,
? ? ? ? ? ? },
? ? ? ? ? ];
? ? ? ? } else {
? ? ? ? ? data = [];
? ? ? ? }
? ? ? ? resolve(data);
? ? ? }, 500);
? ? },
? },
};
