| 12 |
- import{L as p,i as A,a2 as D,J as I,al as s,av as L,o as h,a as _,Z as o,T as b,U as N,b as l,Y as f,W as V,X as E,aE as B,aF as z}from"./vue.e1d8f8c6.js";import{E as M,_ as P}from"./index.5ec7a9d7.js";const u=n=>(B("data-v-5653ef7f"),n=n(),z(),n),R={class:"tree-container layout-pd"},U={class:"tree-head"},j={class:"tree-head-check"},F=u(()=>l("div",{class:"tree-head-one"},"商品 ID",-1)),J=u(()=>l("div",{style:{flex:"1",display:"flex"}},[l("div",{class:"tree-head-two"},"商品名称"),l("div",{class:"tree-head-three"},"描述")],-1)),K={class:"tree-custom-node"},W={style:{flex:"1"}},X={key:0,style:{flex:"1",display:"flex"}},Y={style:{flex:"1"}},Z={style:{flex:"1"}},q=p({name:"pagesTree"}),G=p({...q,setup(n){const t=A(),e=D({treeCheckAll:!1,treeLoading:!1,treeTableData:[],treeDefaultProps:{children:"children",label:"label"},treeSelArr:[],treeLength:0}),v=r=>{let a=0;r.map(c=>{c.children&&(a+=c.children.length)}),e.treeLength=a+r.length},g=()=>{e.treeCheckAll?t.value.setCheckedNodes(e.treeTableData):t.value.setCheckedKeys([])},m=()=>{e.treeSelArr=[],e.treeSelArr=t.value.getCheckedNodes(),e.treeSelArr.length==e.treeLength?e.treeCheckAll=!0:e.treeCheckAll=!1},k=()=>{if(t.value.getCheckedNodes().length<=0){M.warning("请选择元素");return}},w=()=>{e.treeTableData=[{id:1,label:"12987121",label1:"好滋好味鸡蛋仔",label2:"荷兰优质淡奶，奶香浓而不腻",isShow:!0,children:[{id:11,label:"一级 1-1",label1:"好滋好味鸡蛋仔",label2:"荷兰优质淡奶，奶香浓而不腻",isShow:!1},{id:12,label:"一级 1-2",label1:"好滋好味鸡蛋仔",label2:"荷兰优质淡奶，奶香浓而不腻",isShow:!1}]},{id:2,label:"12987122",label1:"好滋好味鸡蛋仔",label2:"荷兰优质淡奶，奶香浓而不腻",isShow:!0,children:[{id:21,label:"二级 2-1",label1:"好滋好味鸡蛋仔",label2:"荷兰优质淡奶，奶香浓而不腻",isShow:!1},{id:22,label:"二级 2-2",label1:"好滋好味鸡蛋仔",label2:"荷兰优质淡奶，奶香浓而不腻",isShow:!1}]},{id:3,label:"12987123",label1:"好滋好味鸡蛋仔",label2:"荷兰优质淡奶，奶香浓而不腻",isShow:!0,children:[{id:31,label:"二级 3-1",label1:"好滋好味鸡蛋仔",label2:"荷兰优质淡奶，奶香浓而不腻",isShow:!1},{id:32,label:"二级 3-2",label1:"好滋好味鸡蛋仔",label2:"荷兰优质淡奶，奶香浓而不腻",isShow:!1},{id:33,label:"二级 3-3",label1:"好滋好味鸡蛋仔",label2:"荷兰优质淡奶，奶香浓而不腻",isShow:!1}]}],v(e.treeTableData)};return I(()=>{w()}),(r,a)=>{const c=s("el-checkbox"),S=s("el-tree"),x=s("SvgIcon"),C=s("el-button"),y=s("el-card"),T=L("loading");return h(),_("div",R,[o(y,{shadow:"hover",header:"element plus Tree 树形控件改成表格"},{default:b(()=>[N((h(),_("div",null,[l("div",U,[l("div",j,[o(c,{modelValue:e.treeCheckAll,"onUpdate:modelValue":a[0]||(a[0]=i=>e.treeCheckAll=i),onChange:g},null,8,["modelValue"])]),F,J]),o(S,{data:e.treeTableData,"show-checkbox":"","node-key":"id",ref_key:"treeTableRef",ref:t,props:e.treeDefaultProps,onCheck:m},{default:b(({node:i,data:d})=>[l("span",K,[l("span",W,f(i.label),1),d.isShow?(h(),_("span",X,[l("span",Y,f(d.label1),1),l("span",Z,f(d.label2),1)])):V("v-if",!0)])]),_:1},8,["data","props"])])),[[T,e.treeLoading]]),o(C,{onClick:k,class:"mt15",size:"default",type:"primary"},{default:b(()=>[o(x,{name:"iconfont icon-shuxingtu"}),E(" 选择元素 ")]),_:1})]),_:1})])}}});const Q=P(G,[["__scopeId","data-v-5653ef7f"],["__file","E:/code/wwwroot/local81.lzj/simple_storage/vue-next-admin/src/views/pages/tree/index.vue"]]);export{Q as default};
|
