yxuse 1.0.41 → 1.0.43
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/index.cjs4.js +236 -1
- package/lib/index.cjs5.js +9106 -22
- package/lib/index.cjs5.js.gz +0 -0
- package/lib/index.cjs5.js.map +1 -1
- package/lib/index.cjs6.js +1 -1
- package/lib/index.cjs6.js.map +1 -1
- package/lib/index.es5.js +2595 -2571
- package/lib/index.es5.js.gz +0 -0
- package/lib/index.es5.js.map +1 -1
- package/lib/index.es6.js +78 -62
- package/lib/index.es6.js.map +1 -1
- package/package.json +1 -1
package/lib/index.cjs6.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index.cjs5.js"),
|
|
1
|
+
"use strict";var c=(a,o,l)=>new Promise((u,p)=>{var i=r=>{try{t(l.next(r))}catch(s){p(s)}},n=r=>{try{t(l.throw(r))}catch(s){p(s)}},t=r=>r.done?u(r.value):Promise.resolve(r.value).then(i,n);t((l=l.apply(a,o)).next())});Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index.cjs5.js"),m={tableData:{type:Array,require:!0},rowKey:{type:String,require:!0},columns:{type:Array,require:!0,default:()=>[]},sortHandle:{type:String,default:"",require:!1},border:{type:Boolean,default:!1},align:{type:String,default:"center",require:!1}},y=e.defineComponent({__name:"DynamicComponents",props:{col:null,row:null},setup(a){const o=a;return(l,u)=>{var p,i,n;return e.openBlock(),e.createBlock(e.resolveDynamicComponent(`el-${(p=o.col)==null?void 0:p.type}`),e.mergeProps({modelValue:a.row[(i=o.col)==null?void 0:i.prop],"onUpdate:modelValue":u[0]||(u[0]=t=>{var r;return a.row[(r=o.col)==null?void 0:r.prop]=t})},(n=o.col)==null?void 0:n.config),{default:e.withCtx(()=>{var t;return[o.col.type==="select"?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList((t=o.col)==null?void 0:t.config.options,r=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent("el-option"),{key:r.value,label:r.label,value:r.value},null,8,["label","value"]))),128)):e.createCommentVNode("",!0)]}),_:1},16,["modelValue"])}}});function b(a){return typeof a=="function"||Object.prototype.toString.call(a)==="[object Object]"&&!e.isVNode(a)}const f={"operate-handle":(a,o)=>!!(a||o)},g=e.defineComponent({name:"YxTable",props:m,emits:f,setup(a,{attrs:o,slots:l,emit:u}){return()=>{const p=(t,r)=>{var s;return t.slotName&&((s=l[t.slotName])==null?void 0:s.call(l,r))},i=a.columns.map(t=>e.createVNode(e.resolveComponent("el-table-column"),e.mergeProps(t,{align:a.align}),{default:r=>(t==null?void 0:t.renderType)==="operate"?n(t,r):t!=null&&t.renderType&&(t==null?void 0:t.renderType)!=="operate"?e.createVNode(y,{col:t,row:r.row},null):(t==null?void 0:t.slotName)&&p(t,r)})),n=(t,r)=>{var s;return e.createVNode("div",{class:"flex justify-center cursor-pointer"},[(s=t.operate)==null?void 0:s.map(d=>e.createVNode("span",{onClick:()=>u("operate-handle",d.key,r.row),class:"mr-10 whitespace-nowrap"},[d.label]))])};return e.createVNode("div",null,[e.createVNode(e.resolveComponent("el-table"),e.mergeProps(o,{"row-key":a.rowKey,data:a.tableData,border:a.border}),b(i)?i:{default:()=>[i]})])}}}),w=e.defineComponent({__name:"index",setup(a){(()=>c(this,null,function*(){const n=yield e.getUserPermissions();console.log(n)}))();const l=e.ref([]),u=[{label:"展开行",type:"expand",slotName:"expand"},{label:"序号",type:"index"},{label:"id",prop:"id"},{label:"名字",prop:"name"},{label:"slot",prop:"slot",slotName:"testSlot"},{label:"time",prop:"time",formatter:({time:n})=>new Date(n).toLocaleString()},{label:"input",prop:"name",renderType:"input",formatter:({time:n})=>new Date(n).toLocaleString()},{label:"select",prop:"name",renderType:"select",config:{options:[{label:"test",value:"test"}]}},{label:"操作",fixed:"right",width:200,renderType:"operate",operate:[{label:"修改",key:"change"},{label:"重置",key:"reset"},{label:"权限",key:"power"},{label:"删除",key:"del"}]}],p="uid";for(let n=0;n<20;n++)l.value.push({id:n,name:"123"+n,uid:"test"+n,time:Date.now(),slot:"123"});const i=(n,t)=>{console.log(n,t)};return(n,t)=>(e.openBlock(),e.createElementBlock("div",null,[e.createVNode(e.unref(g),e.mergeProps({tableData:l.value,columns:u,rowKey:p},{onOperateHandle:i}),{expand:e.withCtx(({row:r})=>[e.createTextVNode(e.toDisplayString(JSON.stringify(r)),1)]),testSlot:e.withCtx(({row:r})=>[e.createTextVNode(e.toDisplayString(JSON.stringify(r)),1)]),_:1},16)]))}});exports.default=w;
|
|
2
2
|
//# sourceMappingURL=index.cjs6.js.map
|
package/lib/index.cjs6.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs6.js","sources":["../packages/components/YxTable/interface/index.ts","../packages/components/YxTable/index.tsx","../example/table/index.vue"],"sourcesContent":["/*\r\n * @Author: WangXin\r\n * @Date: 2023-08-28 10:58:42\r\n * @LastEditors: WangXin\r\n * @LastEditTime: 2023-08-29 09:20:56\r\n * @FilePath: \\yxUse\\packages\\components\\YxTable\\interface\\index.ts\r\n * @Description:\r\n *\r\n * Copyright (c) 2023 by YuXing, All Rights Reserved.\r\n */\r\nimport type { PropType } from \"vue\";\r\nexport const yxTableProps = {\r\n\ttableData: {\r\n\t\ttype: Array as PropType<TableProps[\"tableData\"]>,\r\n\t\trequire: true\r\n\t},\r\n\trowKey: {\r\n\t\ttype: String,\r\n\t\trequire: true\r\n\t},\r\n\tcolumns: {\r\n\t\ttype: Array as PropType<TableColumn[]>,\r\n\t\trequire: true,\r\n\t\tdefault: () => []\r\n\t},\r\n\tsortHandle: {\r\n\t\ttype: String,\r\n\t\tdefault: \"\",\r\n\t\trequire: false\r\n\t},\r\n\tborder: {\r\n\t\ttype: Boolean,\r\n\t\tdefault: false\r\n\t},\r\n\talign: {\r\n\t\ttype: String,\r\n\t\tdefault: \"center\",\r\n\t\trequire: false\r\n\t}\r\n};\r\nexport interface TableProps {\r\n\t/**表格数据 */\r\n\ttableData: Array<any>;\r\n\trowKey: string;\r\n\tcolumns: TableColumn[];\r\n\tpageInfo?: PageInfo;\r\n\t/**对齐方式 */\r\n\talign?: string;\r\n\tborder?: boolean;\r\n\tsearchFormConfig?: FormConfig[];\r\n\tsearchParams?: { [key: string]: any };\r\n\t/**是否开启拖拽 */\r\n\tsort?: boolean;\r\n\tsortHandle?: string; //拖拽节点类名\r\n\tload?: Function;\r\n}\r\nexport interface FormConfig {\r\n\tlabel: string; //名称\r\n\ttype: string; //类型\r\n\tkey?: string; // 指定数据绑定的key\r\n\toptions?: Array<{ [key: string]: any }> | Function; //下拉框选项配置\r\n\twidth?: number; //文字宽度\r\n\tcomponentWidth?: string; //组件宽度\r\n\tdateType?: string; //日期渲染的类型\r\n\tinputType?: string; //文本框类型\r\n\tdisabled?: boolean; //是否禁用\r\n\tclearable?: boolean; //是否能清除\r\n}\r\nexport interface PageInfo {\r\n\tsize: number;\r\n\tcurrent: number;\r\n\ttotal: number;\r\n}\r\nexport interface TableColumn {\r\n\t/** 列的名字 */\r\n\tlabel?: string;\r\n\t/** 对应数据的key */\r\n\tprop?: string;\r\n\t/** 宽度 */\r\n\twidth?: number;\r\n\t/** 列的类型 */\r\n\ttype?: \"index\" | \"selection\" | \"expand\";\r\n\t/** 渲染类型 */\r\n\trenderType?: string;\r\n\t/** 操作栏 */\r\n\toperate?: any[];\r\n\t/** 固定栏 */\r\n\tfixed?: string;\r\n\t/** 开关打开的value */\r\n\tactiveValue?: string | number | boolean;\r\n\t/** 开关关闭的value */\r\n\tinactiveValue?: string | number | boolean;\r\n\t/** 对数据进行格式化 */\r\n\tformatter?: Function;\r\n\t/** 插槽名称 */\r\n\tslotName?: string;\r\n\t/** 动态组件配置 */\r\n\tconfig?: Record<string, any>;\r\n}\r\n","/*\r\n * @Author: WangXin\r\n * @Date: 2023-08-28 10:10:35\r\n * @LastEditors: WangXin\r\n * @LastEditTime: 2023-08-29 09:20:21\r\n * @FilePath: \\yxUse\\packages\\components\\YxTable\\index.tsx\r\n * @Description:\r\n *\r\n * Copyright (c) 2023 by YuXing, All Rights Reserved.\r\n */\r\nimport { defineComponent } from \"vue\";\r\nimport type { ExtractPropTypes } from \"vue\";\r\nimport type { TableColumn, TableRow } from \"./interface/index\";\r\nimport { yxTableProps } from \"./interface/index\";\r\nimport DynamicComponents from \"./components/DynamicComponents.vue\";\r\nexport type YxTableProps = ExtractPropTypes<typeof yxTableProps>;\r\n\r\nconst yxTableEmits = {\r\n\t\"operate-handle\": (key: string, row: object) => (key || row ? true : false)\r\n};\r\nexport type TabNavEmits = typeof yxTableEmits;\r\n\r\nconst YxTable = defineComponent({\r\n\tname: \"YxTable\",\r\n\tprops: yxTableProps,\r\n\temits: yxTableEmits,\r\n\tsetup(props, { attrs, slots, emit }) {\r\n\t\treturn () => {\r\n\t\t\t//动态插槽\r\n\t\t\tconst columnSlots = (col: TableColumn, scope: TableRow) => col.slotName && slots[col.slotName]?.(scope);\r\n\t\t\t//处理列\r\n\t\t\tconst columns = props.columns.map((col: TableColumn) => {\r\n\t\t\t\treturn (\r\n\t\t\t\t\t<el-table-column {...col} align={props.align}>\r\n\t\t\t\t\t\t{{\r\n\t\t\t\t\t\t\tdefault: (scope: any) => {\r\n\t\t\t\t\t\t\t\t//先处理操作栏\r\n\t\t\t\t\t\t\t\tif (col?.renderType === \"operate\") return renderOperate(col, scope);\r\n\t\t\t\t\t\t\t\t//处理动态渲染的组件\r\n\t\t\t\t\t\t\t\tif (col?.renderType && col?.renderType !== \"operate\") return <DynamicComponents col={col} row={scope.row} />;\r\n\t\t\t\t\t\t\t\t//处理自定义插槽\r\n\t\t\t\t\t\t\t\treturn col?.slotName && columnSlots(col, scope);\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t</el-table-column>\r\n\t\t\t\t);\r\n\t\t\t});\r\n\t\t\t//操作栏\r\n\t\t\tconst renderOperate = (col: TableColumn, scope) => {\r\n\t\t\t\treturn (\r\n\t\t\t\t\t<div class=\"flex justify-center cursor-pointer\">\r\n\t\t\t\t\t\t{col.operate?.map(op => {\r\n\t\t\t\t\t\t\treturn (\r\n\t\t\t\t\t\t\t\t<span onClick={() => emit(\"operate-handle\", op.key, scope.row)} class=\"mr-10 whitespace-nowrap\">\r\n\t\t\t\t\t\t\t\t\t{op.label}\r\n\t\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t);\r\n\t\t\t\t\t\t})}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t);\r\n\t\t\t};\r\n\t\t\treturn (\r\n\t\t\t\t<div>\r\n\t\t\t\t\t<el-table {...attrs} row-key={props.rowKey} data={props.tableData} border={props.border}>\r\n\t\t\t\t\t\t{columns}\r\n\t\t\t\t\t</el-table>\r\n\t\t\t\t</div>\r\n\t\t\t);\r\n\t\t};\r\n\t}\r\n});\r\nexport default YxTable;\r\n","<!--\r\n * @Author: WangXin\r\n * @Date: 2023-08-28 10:13:48\r\n * @LastEditors: WangXin\r\n * @LastEditTime: 2023-09-04 17:23:30\r\n * @FilePath: \\yxUse\\example\\table\\index.vue\r\n * @Description: \r\n * \r\n * Copyright (c) 2023 by YuXing, All Rights Reserved. \r\n-->\r\n<script setup lang=\"ts\">\r\nimport { ref } from \"vue\";\r\nimport YxTable from \"../../packages/components/YxTable\";\r\nimport type { TableColumn } from \"../../packages/components/YxTable/interface/index.ts\";\r\nimport { auth } from \"../../packages/api\";\r\nconst test = async () => {\r\n\tconst data = await auth.getUserPermissions();\r\n\tconsole.log(data);\r\n};\r\ntest();\r\ninterface User {\r\n\tid: number;\r\n\tname: string;\r\n\tuid: string;\r\n\ttime: number;\r\n\tslot: string;\r\n}\r\nconst tableData = ref<User[]>([]);\r\nconst columns: TableColumn[] = [\r\n\t{ label: \"展开行\", type: \"expand\", slotName: \"expand\" },\r\n\t{ label: \"序号\", type: \"index\" },\r\n\t{ label: \"id\", prop: \"id\" },\r\n\t{ label: \"名字\", prop: \"name\" },\r\n\t{ label: \"slot\", prop: \"slot\", slotName: \"testSlot\" },\r\n\t{\r\n\t\tlabel: \"time\",\r\n\t\tprop: \"time\",\r\n\t\tformatter: ({ time }) => new Date(time).toLocaleString()\r\n\t},\r\n\t{\r\n\t\tlabel: \"input\",\r\n\t\tprop: \"name\",\r\n\t\trenderType: \"input\",\r\n\t\tformatter: ({ time }) => new Date(time).toLocaleString()\r\n\t},\r\n\t{\r\n\t\tlabel: \"select\",\r\n\t\tprop: \"name\",\r\n\t\trenderType: \"select\",\r\n\t\tconfig: {\r\n\t\t\toptions: [{ label: \"test\", value: \"test\" }]\r\n\t\t}\r\n\t},\r\n\t{\r\n\t\tlabel: \"操作\",\r\n\t\tfixed: \"right\",\r\n\t\twidth: 200,\r\n\t\trenderType: \"operate\",\r\n\t\toperate: [\r\n\t\t\t{ label: \"修改\", key: \"change\" },\r\n\t\t\t{ label: \"重置\", key: \"reset\" },\r\n\t\t\t{ label: \"权限\", key: \"power\" },\r\n\t\t\t{ label: \"删除\", key: \"del\" }\r\n\t\t]\r\n\t}\r\n];\r\nconst rowKey = \"uid\";\r\nfor (let index = 0; index < 20; index++) {\r\n\ttableData.value.push({\r\n\t\tid: index,\r\n\t\tname: \"123\" + index,\r\n\t\tuid: \"test\" + index,\r\n\t\ttime: Date.now(),\r\n\t\tslot: \"123\"\r\n\t});\r\n}\r\nconst operateHandle = (key, row) => {\r\n\tconsole.log(key, row);\r\n};\r\n</script>\r\n<template>\r\n\t<div>\r\n\t\t<YxTable v-bind=\"{ tableData, columns, rowKey }\" @operate-handle=\"operateHandle\">\r\n\t\t\t<template #expand=\"{ row }\"> {{ JSON.stringify(row) }} </template>\r\n\t\t\t<template #testSlot=\"{ row }\"> {{ JSON.stringify(row) }} </template>\r\n\t\t</YxTable>\r\n\t</div>\r\n</template>\r\n<style scoped lang=\"scss\"></style>\r\n"],"names":["yxTableProps","_isSlot","s","_isVNode","yxTableEmits","key","row","YxTable","defineComponent","name","props","emits","setup","attrs","slots","emit","columnSlots","col","scope","slotName","columns","map","_createVNode","_resolveComponent","_mergeProps","align","default","renderType","renderOperate","DynamicComponents","operate","op","label","rowKey","tableData","border","data","auth.getUserPermissions","ref","time","index","operateHandle"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.cjs6.js","sources":["../packages/components/YxTable/interface/index.ts","../packages/components/YxTable/index.tsx","../example/table/index.vue"],"sourcesContent":["/*\r\n * @Author: WangXin\r\n * @Date: 2023-08-28 10:58:42\r\n * @LastEditors: WangXin\r\n * @LastEditTime: 2023-08-29 09:20:56\r\n * @FilePath: \\yxUse\\packages\\components\\YxTable\\interface\\index.ts\r\n * @Description:\r\n *\r\n * Copyright (c) 2023 by YuXing, All Rights Reserved.\r\n */\r\nimport type { PropType } from \"vue\";\r\nexport const yxTableProps = {\r\n\ttableData: {\r\n\t\ttype: Array as PropType<TableProps[\"tableData\"]>,\r\n\t\trequire: true\r\n\t},\r\n\trowKey: {\r\n\t\ttype: String,\r\n\t\trequire: true\r\n\t},\r\n\tcolumns: {\r\n\t\ttype: Array as PropType<TableColumn[]>,\r\n\t\trequire: true,\r\n\t\tdefault: () => []\r\n\t},\r\n\tsortHandle: {\r\n\t\ttype: String,\r\n\t\tdefault: \"\",\r\n\t\trequire: false\r\n\t},\r\n\tborder: {\r\n\t\ttype: Boolean,\r\n\t\tdefault: false\r\n\t},\r\n\talign: {\r\n\t\ttype: String,\r\n\t\tdefault: \"center\",\r\n\t\trequire: false\r\n\t}\r\n};\r\nexport interface TableProps {\r\n\t/**表格数据 */\r\n\ttableData: Array<any>;\r\n\trowKey: string;\r\n\tcolumns: TableColumn[];\r\n\tpageInfo?: PageInfo;\r\n\t/**对齐方式 */\r\n\talign?: string;\r\n\tborder?: boolean;\r\n\tsearchFormConfig?: FormConfig[];\r\n\tsearchParams?: { [key: string]: any };\r\n\t/**是否开启拖拽 */\r\n\tsort?: boolean;\r\n\tsortHandle?: string; //拖拽节点类名\r\n\tload?: Function;\r\n}\r\nexport interface FormConfig {\r\n\tlabel: string; //名称\r\n\ttype: string; //类型\r\n\tkey?: string; // 指定数据绑定的key\r\n\toptions?: Array<{ [key: string]: any }> | Function; //下拉框选项配置\r\n\twidth?: number; //文字宽度\r\n\tcomponentWidth?: string; //组件宽度\r\n\tdateType?: string; //日期渲染的类型\r\n\tinputType?: string; //文本框类型\r\n\tdisabled?: boolean; //是否禁用\r\n\tclearable?: boolean; //是否能清除\r\n}\r\nexport interface PageInfo {\r\n\tsize: number;\r\n\tcurrent: number;\r\n\ttotal: number;\r\n}\r\nexport interface TableColumn {\r\n\t/** 列的名字 */\r\n\tlabel?: string;\r\n\t/** 对应数据的key */\r\n\tprop?: string;\r\n\t/** 宽度 */\r\n\twidth?: number;\r\n\t/** 列的类型 */\r\n\ttype?: \"index\" | \"selection\" | \"expand\";\r\n\t/** 渲染类型 */\r\n\trenderType?: string;\r\n\t/** 操作栏 */\r\n\toperate?: any[];\r\n\t/** 固定栏 */\r\n\tfixed?: string;\r\n\t/** 开关打开的value */\r\n\tactiveValue?: string | number | boolean;\r\n\t/** 开关关闭的value */\r\n\tinactiveValue?: string | number | boolean;\r\n\t/** 对数据进行格式化 */\r\n\tformatter?: Function;\r\n\t/** 插槽名称 */\r\n\tslotName?: string;\r\n\t/** 动态组件配置 */\r\n\tconfig?: Record<string, any>;\r\n}\r\n","/*\r\n * @Author: WangXin\r\n * @Date: 2023-08-28 10:10:35\r\n * @LastEditors: WangXin\r\n * @LastEditTime: 2023-08-29 09:20:21\r\n * @FilePath: \\yxUse\\packages\\components\\YxTable\\index.tsx\r\n * @Description:\r\n *\r\n * Copyright (c) 2023 by YuXing, All Rights Reserved.\r\n */\r\nimport { defineComponent } from \"vue\";\r\nimport type { ExtractPropTypes } from \"vue\";\r\nimport type { TableColumn, TableRow } from \"./interface/index\";\r\nimport { yxTableProps } from \"./interface/index\";\r\nimport DynamicComponents from \"./components/DynamicComponents.vue\";\r\nexport type YxTableProps = ExtractPropTypes<typeof yxTableProps>;\r\n\r\nconst yxTableEmits = {\r\n\t\"operate-handle\": (key: string, row: object) => (key || row ? true : false)\r\n};\r\nexport type TabNavEmits = typeof yxTableEmits;\r\n\r\nconst YxTable = defineComponent({\r\n\tname: \"YxTable\",\r\n\tprops: yxTableProps,\r\n\temits: yxTableEmits,\r\n\tsetup(props, { attrs, slots, emit }) {\r\n\t\treturn () => {\r\n\t\t\t//动态插槽\r\n\t\t\tconst columnSlots = (col: TableColumn, scope: TableRow) => col.slotName && slots[col.slotName]?.(scope);\r\n\t\t\t//处理列\r\n\t\t\tconst columns = props.columns.map((col: TableColumn) => {\r\n\t\t\t\treturn (\r\n\t\t\t\t\t<el-table-column {...col} align={props.align}>\r\n\t\t\t\t\t\t{{\r\n\t\t\t\t\t\t\tdefault: (scope: any) => {\r\n\t\t\t\t\t\t\t\t//先处理操作栏\r\n\t\t\t\t\t\t\t\tif (col?.renderType === \"operate\") return renderOperate(col, scope);\r\n\t\t\t\t\t\t\t\t//处理动态渲染的组件\r\n\t\t\t\t\t\t\t\tif (col?.renderType && col?.renderType !== \"operate\") return <DynamicComponents col={col} row={scope.row} />;\r\n\t\t\t\t\t\t\t\t//处理自定义插槽\r\n\t\t\t\t\t\t\t\treturn col?.slotName && columnSlots(col, scope);\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t</el-table-column>\r\n\t\t\t\t);\r\n\t\t\t});\r\n\t\t\t//操作栏\r\n\t\t\tconst renderOperate = (col: TableColumn, scope) => {\r\n\t\t\t\treturn (\r\n\t\t\t\t\t<div class=\"flex justify-center cursor-pointer\">\r\n\t\t\t\t\t\t{col.operate?.map(op => {\r\n\t\t\t\t\t\t\treturn (\r\n\t\t\t\t\t\t\t\t<span onClick={() => emit(\"operate-handle\", op.key, scope.row)} class=\"mr-10 whitespace-nowrap\">\r\n\t\t\t\t\t\t\t\t\t{op.label}\r\n\t\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t);\r\n\t\t\t\t\t\t})}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t);\r\n\t\t\t};\r\n\t\t\treturn (\r\n\t\t\t\t<div>\r\n\t\t\t\t\t<el-table {...attrs} row-key={props.rowKey} data={props.tableData} border={props.border}>\r\n\t\t\t\t\t\t{columns}\r\n\t\t\t\t\t</el-table>\r\n\t\t\t\t</div>\r\n\t\t\t);\r\n\t\t};\r\n\t}\r\n});\r\nexport default YxTable;\r\n","<!--\r\n * @Author: WangXin\r\n * @Date: 2023-08-28 10:13:48\r\n * @LastEditors: WangXin\r\n * @LastEditTime: 2023-09-04 17:23:30\r\n * @FilePath: \\yxUse\\example\\table\\index.vue\r\n * @Description: \r\n * \r\n * Copyright (c) 2023 by YuXing, All Rights Reserved. \r\n-->\r\n<script setup lang=\"ts\">\r\nimport { ref } from \"vue\";\r\nimport YxTable from \"../../packages/components/YxTable\";\r\nimport type { TableColumn } from \"../../packages/components/YxTable/interface/index.ts\";\r\nimport { auth } from \"../../packages/api\";\r\nconst test = async () => {\r\n\tconst data = await auth.getUserPermissions();\r\n\tconsole.log(data);\r\n};\r\ntest();\r\ninterface User {\r\n\tid: number;\r\n\tname: string;\r\n\tuid: string;\r\n\ttime: number;\r\n\tslot: string;\r\n}\r\nconst tableData = ref<User[]>([]);\r\nconst columns: TableColumn[] = [\r\n\t{ label: \"展开行\", type: \"expand\", slotName: \"expand\" },\r\n\t{ label: \"序号\", type: \"index\" },\r\n\t{ label: \"id\", prop: \"id\" },\r\n\t{ label: \"名字\", prop: \"name\" },\r\n\t{ label: \"slot\", prop: \"slot\", slotName: \"testSlot\" },\r\n\t{\r\n\t\tlabel: \"time\",\r\n\t\tprop: \"time\",\r\n\t\tformatter: ({ time }) => new Date(time).toLocaleString()\r\n\t},\r\n\t{\r\n\t\tlabel: \"input\",\r\n\t\tprop: \"name\",\r\n\t\trenderType: \"input\",\r\n\t\tformatter: ({ time }) => new Date(time).toLocaleString()\r\n\t},\r\n\t{\r\n\t\tlabel: \"select\",\r\n\t\tprop: \"name\",\r\n\t\trenderType: \"select\",\r\n\t\tconfig: {\r\n\t\t\toptions: [{ label: \"test\", value: \"test\" }]\r\n\t\t}\r\n\t},\r\n\t{\r\n\t\tlabel: \"操作\",\r\n\t\tfixed: \"right\",\r\n\t\twidth: 200,\r\n\t\trenderType: \"operate\",\r\n\t\toperate: [\r\n\t\t\t{ label: \"修改\", key: \"change\" },\r\n\t\t\t{ label: \"重置\", key: \"reset\" },\r\n\t\t\t{ label: \"权限\", key: \"power\" },\r\n\t\t\t{ label: \"删除\", key: \"del\" }\r\n\t\t]\r\n\t}\r\n];\r\nconst rowKey = \"uid\";\r\nfor (let index = 0; index < 20; index++) {\r\n\ttableData.value.push({\r\n\t\tid: index,\r\n\t\tname: \"123\" + index,\r\n\t\tuid: \"test\" + index,\r\n\t\ttime: Date.now(),\r\n\t\tslot: \"123\"\r\n\t});\r\n}\r\nconst operateHandle = (key, row) => {\r\n\tconsole.log(key, row);\r\n};\r\n</script>\r\n<template>\r\n\t<div>\r\n\t\t<YxTable v-bind=\"{ tableData, columns, rowKey }\" @operate-handle=\"operateHandle\">\r\n\t\t\t<template #expand=\"{ row }\"> {{ JSON.stringify(row) }} </template>\r\n\t\t\t<template #testSlot=\"{ row }\"> {{ JSON.stringify(row) }} </template>\r\n\t\t</YxTable>\r\n\t</div>\r\n</template>\r\n<style scoped lang=\"scss\"></style>\r\n"],"names":["yxTableProps","_isSlot","s","_isVNode","yxTableEmits","key","row","YxTable","defineComponent","name","props","emits","setup","attrs","slots","emit","columnSlots","col","scope","slotName","columns","map","_createVNode","_resolveComponent","_mergeProps","align","default","renderType","renderOperate","DynamicComponents","operate","op","label","rowKey","tableData","border","__async","data","auth.getUserPermissions","ref","time","index","operateHandle"],"mappings":"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"}
|