ray-template/assets/index-243c448e.js

import{R as V}from"./index-bf3a29df.js";import{R as c}from"./index-2a9db1be.js";import"./index-f0e321ba.js";import"./lodash-es@4.17.21-a64fa61b.js";import"./screenfull@6.0.2-b3e6dc1f.js";import"./@vueuse_core@9.13.0_vue@3.3.4-7e6f7ed6.js";import"./@vueuse_shared@9.13.0_vue@3.3.4-b2a32b41.js";import"./dayjs@1.11.9-208bf754.js";import"./awesome-qr@2.1.5-rc.0-423f5ed7.js";import"./canvas@2.11.2-f05bd587.js";import"./js-binary-schema-parser@2.0.3-9e47f7a8.js";import"./pinia-plugin-persistedstate@3.2.0_pinia@2.1.6-02097300.js";import"./clipboard@2.0.11-3371ee7a.js";import"./vuedraggable@4.1.0_vue@3.3.4-15830514.js";import"./sortablejs@1.14.0-69b0b3d5.js";import"./print-js@1.6.0-8c6cc636.js";const h=Vue.defineComponent({name:"TableView",setup(){const u=Vue.ref(),a=[{title:"Name",key:"name"},{title:"Age",key:"age"},{title:"Address",key:"address"},{title:"Tags",key:"tags",render:e=>e.tags.map(i=>Vue.h(naive.NTag,{style:{marginRight:"6px"},type:"info",bordered:!1},{default:()=>i}))},{title:"Remark",key:"remark",width:300},{title:"Action",key:"actions",render:e=>Vue.h(naive.NButton,{size:"small"},{default:()=>"Send Email"})}],o=Vue.ref([...a].map(e=>({...e,width:400}))),t=Vue.ref([{key:0,name:"John Brown",age:32,address:"New York No. 1 Lake Park",tags:["nice","developer"],remark:"我是一条很长很长的备注"},{key:1,name:"Jim Green",age:42,address:"London No. 1 Lake Park",tags:["wow"],remark:"我是一条很长很长的备注"},{key:2,name:"Joe Black",age:32,address:"Sidney No. 1 Lake Park",tags:["cool","teacher"],remark:"我是一条很长很长的备注"}]),n=[{label:"编辑",key:"edit"},{label:()=>Vue.h("span",{style:{color:"red"}},"删除"),key:"delete"}],r=Vue.reactive({gridItemCount:4,gridCollapsedRows:1,tableLoading:!1}),d=(e,l)=>{e==="delete"&&t.value.splice(l,1)};return Vue.onMounted(()=>{var e;(e=u.value)==null||e.tableMethods}),{...Vue.toRefs(r),tableData:t,actionColumns:o,baseColumns:a,tableMenuOptions:n,handleMenuSelect:d,tableRef:u}},render(){return Vue.createVNode("div",null,[Vue.createVNode(naive.NH2,null,{default:()=>[Vue.createTextVNode("RayTable 组件使用")]}),Vue.createVNode(naive.NUl,{alignText:!0},{default:()=>[Vue.createVNode(naive.NLi,null,{default:()=>[Vue.createTextVNode("该组件基于 Naive UI DataTable 组件封装。实现右键菜单、表格标题、导出为 excel 操作栏等功能")]}),Vue.createVNode(naive.NLi,null,{default:()=>[Vue.createTextVNode("RayTable 完全继承 DataTable 的所有属性与方法")]}),Vue.createVNode(naive.NLi,null,{default:()=>[Vue.createTextVNode("相关拓展 props 属性，可以在源码位置 src/components/RayTable/src/props.ts 中查看相关代码与注释")]}),Vue.createVNode(naive.NLi,null,{default:()=>[Vue.createTextVNode("该组件可以配合 RayCollapseGird 组件使用实现可折叠搜索栏")]})]}),Vue.createVNode(naive.NH2,null,{default:()=>[Vue.createTextVNode("配合 RayCollapseGird 组件使用与 RayTable 拓展功能")]}),Vue.createVNode(naive.NP,null,{default:()=>[Vue.createTextVNode("使用响应式方法代理 columns 并且打开 action 则可以启用操作栏(v-model:columns)")]}),Vue.createVNode(naive.NP,null,{default:()=>[Vue.createTextVNode("拖拽操作栏动态切换表格列")]}),Vue.createVNode(naive.NP,null,{default:()=>[Vue.createTextVNode("点击左右固定按钮，即可动态固定列")]}),Vue.createVNode(naive.NP,null,{default:()=>[Vue.createTextVNode("点击修改列宽度，即可拖动列修改宽度")]}),Vue.createVNode(naive.NP,null,{default:()=>[Vue.createTextVNode("点击导出按钮即可导出 excel 表格，默认以列为表头输出")]}),Vue.createVNode(naive.NP,null,{default:()=>[Vue.createTextVNode("点击打印按钮即可打印该表格")]}),Vue.createVNode(naive.NP,null,{default:()=>[Vue.createTextVNode("右键菜单")]}),Vue.createVNode(naive.NP,null,{default:()=>[Vue.createTextVNode("全屏表格")]}),Vue.createVNode(c,{bordered:!1,collapsedRows:this.gridCollapsedRows,cols:this.gridItemCount,onUpdateValue:u=>window.$message.info(`我是 RayCollapseGrid 组件${u?"收起":"展开"}的回调函数`)},{action:()=>Vue.createVNode(Vue.Fragment,null,[Vue.createVNode(naive.NButton,{type:"primary"},{default:()=>[Vue.createTextVNode("搜索")]}),Vue.createVNode(naive.NButton,null,{default:()=>[Vue.createTextVNode("重置")]})]),default:()=>Vue.createVNode(Vue.Fragment,null,[Vue.createVNode(naive.NGridItem,null,{default:()=>[Vue.createVNode(naive.NSelect,null,null)]}),Vue.createVNode(naive.NGridItem,null,{default:()=>[Vue.createVNode(naive.NInput,null,null)]}),Vue.createVNode(naive.NGridItem,null,{default:()=>[Vue.createVNode(naive.NDatePicker,{type:"datetimerange",clearable:!0},null)]}),Vue.createVNode(naive.NGridItem,null,{default:()=>[Vue.createVNode(naive.NInput,null,null)]}),Vue.createVNode(naive.NGridItem,null,{default:()=>[Vue.createVNode(naive.NInput,null,null)]})])}),Vue.createVNode(V,{style:"margin-top: 18px",ref:"tableRef",scrollX:2e3,title:Vue.createVNode(naive.NSpace,{align:"center"},{default:()=>[Vue.createVNode("span",null,[Vue.createTextVNode("标题插槽:")]),Vue.createVNode(naive.NSwitch,{onUpdateValue:u=>this.tableLoading=u},null)]}),data:this.tableData,columns:this.actionColumns,"onUpdate:columns":u=>this.actionColumns=u,pagination:{pageSize:10},loading:this.tableLoading,rightClickOptions:this.tableMenuOptions,onRightMenuClick:this.handleMenuSelect.bind(this)},{tableFooter:()=>"表格的底部内容区域插槽，有时候你可能会用上"})])}});export{h as default};