效果图和组件结构图 效果图 组件结构 eltable组件二次封装过程 table主文件：index。vuetemplateeltable：datatableDatastylewidth：100selectionchangehandleSelectionChangesortchangesortChageCallBackeltablecolumnvifcheckboxtypeselectionwidth55eltablecolumneltablecolumnvifindextypeindexwidth50eltablecolumntemplatevforitemincolumneltablecolumn：sortbyitem。sortby：sortableitem。sort：alignitem。align：propitem。prop：labelitem。label：widthitem。widthtemplateslotscopescope！利用type属性判断该列的类型！插槽主要是实现操作列存放按钮slotvifitem。typeslot：nameitem。slotname：datascope。row！通过动态组件渲染对应类型列如文件列表处：functionimagesswitchtext，text为默认项componentvelse：datascope。row：propitem。prop：configitem：is！item。type？comtext：com｛item。type｝componenttemplateeltablecolumntemplateeltabletemplatestylescopedlangscssstyle 各个类型组件：srccomponentstablecontroltextindex。vue！Descripttion：version：v。1Author：吴泽豪Date：2023020117：26：47LastEditors：吴泽豪LastEditTime：2023020121：57：20template｛｛data〔prop〕｝｝templatestylescopedlangscssstyle 入口引用文件：srcviewscontentindex。vue！Descripttion：version：v。1Author：吴泽豪Date：2023020117：26：47LastEditors：吴泽豪LastEditTime：2023020413：43：30templateelbuttontypeprimaryclicksendCallbackvpermisslist：send提交elbuttonelbuttontypedangerclickdeleteCallbackvpermisslist：deleteAll全部删除elbutton！主要templatevslot：opertionsslotelbuttonclickjum（slot。data。id）typeprimary编辑elbuttonelbuttonclickdeleteId（slot。data。id）typedanger删除elbuttontemplateatable！主要templatestylescopedlangscssstyle 将组件包上传至npm 1、注册账号：链接：https：www。npmjs。com（账号、邮箱（密码找回）、密码） 2、包准备 在项目里创建一个文件夹存放所有的封装组件，并将封装的组件整个文件夹（table）放置在package文件夹内并创建一个组件注册入口文件index。js，如： package组件注册入口文件packageindex。jsDescripttion：version：v。1Author：吴泽豪Date：2023020310：22：24LastEditors：吴泽豪LastEditTime：2023020413：13：01所有组件注册入口，批量注册importaTablefrom。。packagetableindex。vueconstcoms〔aTable〕constinstallfunction（Vue）｛coms。forEach（com｛Vue。component（com。name，com）｝）｝exportdefaultinstall 3、打包 在总项目package。json创建打包命令package scripts：｛serve：vuecliserviceserve，build：vuecliservicebuild，lint：vuecliservicelint，package：vuecliservicebuildtargetlib。srcpackageindex。jsnamettabledestatable｝，targetlib指定打包目录name打包后的文件名字dest打包后的文件夹名称 运行npmrunpackage生成包，如图： 待上传至npm 4、上传准备条件，创建atablepackage。json，对应写名称（唯一）｛name：wzhtable，version：1。0。1，description：，main：ttable。common。js，scripts：｛test：echoError：notestspecifiedexit1｝，keywords：〔〕，author：，license：ISC｝ 5、上传（将npm包切换到官网源，不要用淘宝源） 登录时会提示打开浏览器登录，登陆后就会把AccessTokens加入npm 6、之后执行npmpublish 7、下载使用命令npmiwzhtablelegacypeerdeps 8、引入使用Descripttion：version：v。1Author：吴泽豪Date：2023020117：16：34LastEditors：吴泽豪LastEditTime：2023020412：54：37importVuefromvueimportAppfrom。App。vueimportrouterfrom。routerimportstorefrom。storeimportElementUIfromelementui；importelementuilibthemechalkindex。css；importhasPermissfromutlispermission引入importwzhtablefromwzhtableVue。config。productionTipfalseVue。use（ElementUI）注册Vue。use（wzhtable）自定义的指令插件Vue。use（hasPermiss）newVue（｛router，store，render：hh（App）｝）。mount（app）
紫砂壶如何鉴别好坏？怎样辨别紫砂壶的好坏？紫砂壶的种类、材质繁多，不同年代的紫砂壶也会有所区别。不少人困惑，怎样辨别紫砂壶的好坏呢？关于，紫砂壶如何鉴别好坏？怎样辨别紫砂壶的好坏？5号网小编来为您一一解答！紫砂壶如何鉴……欠薪频发，股改维艰中国足球职业联赛何以为继？武汉三镇创造了中国足球职业联赛纪录，过去三年分别获得中乙、中甲、中超冠军。图为2022年中超冠军颁奖典礼。（ICPhoto图）没人能想到，中超冠军会由两个退赛的球队决定。……紫砂壶怎样开壶？新紫砂壶如何开壶？紫砂壶买回家后，都会经过清洗处理在使用，这个就叫开壶。不少人困惑，新紫砂壶如何开壶呢？关于，紫砂壶怎样开壶？新紫砂壶如何开壶？5号网小编来为您一一解答！紫砂壶怎样开壶1、……为什么要用保鲜膜保鲜膜怎么区分好坏大家在生活中应都听说过非常多的常识吧，那么你了解保鲜膜吗？今天小编就和大家一起来了解一下吧，究竟为什么要用保鲜膜，以及保鲜膜怎么区分好坏？为什么要用保鲜膜用保鲜膜包裹食物……毛巾被发黄了怎么恢复日常清洁毛巾被方法毛巾被用的时间长了没有保存好容易发黄变色，这个时候可以这样处理。发黄了可以使用亮白增艳的洗衣液洗涤，如果没用的话可以使用衣物色泽净进行浸泡再去洗干净。毛巾被发黄了怎么恢复……天气渐冷，总是手脚冰凉，咋回事？气温降低，大家纷纷换上了保暖必备的秋裤，不过还是有一些人总是全身冷冰冰的，哪怕在天气微凉的时候，裹的再厚，手脚还是冰凉。中医上说，手脚冰凉被称为四逆，主要是由于阳气虚造成……青海果洛州玛多县发生5。8级地震发生地震怎样自救地震，是较为常见的自然灾害，往往是突然来袭，这就需要我们有着相关的地震知识储备，以备发生地震时可以自救。那么，在室内和内外发生地震时，应该如何避震呢？青海果洛州玛多县发生5。8……逆天改命的潘粤明，婚变后重写自己的结局，现在却一胖毁所有？在人生最至暗的那段日子里，潘粤明也没向命运服过软，但没想到一切由暗到明之后，再度横亘在他命运面前的，却是一个字胖。潘粤明自然是瘦过的，在他还是英俊小生的日子里，他曾是《京……大衣哥儿子儿媳疑似婚变，陈亚楠嫌小伟不上进，否认拿过彩礼家家有本难念的经，大衣哥朱之文的儿媳妇陈亚楠独自开直播，被问及小伟在哪里，陈亚楠满脸心酸和委屈的模样。陈亚楠借机澄清自己结婚时的一些传闻，陈亚楠本来在医院工作，和小伟是相……夏季驱蚊防蚊小妙招防蚊这么简单蚊子可以说是许多人家里的困扰，虽然蚊子不会造成多大的伤害，但是那种日以继夜的骚扰、还看不到这日子的尽头，想尽办法的灭蚊的话题可以说是长年不衰，但是！会继续讨论就是因为过往讨论的……蒸汽眼罩可以消肿吗蒸汽眼罩可以用几次通常我们大家很多人在日常生活中都是有很多地方需要用眼的，所以经常会出现眼部疲劳的现象，这时就有很多人会使用蒸汽眼罩，那么蒸汽眼罩可以消肿吗？蒸汽眼罩可以用几次？蒸汽眼罩可以消肿……蒸汽眼罩对近视眼有好处吗蒸汽眼罩对干眼症有好处吗蒸汽眼罩是一种我们大家很多人都用过的产品，而同时蒸汽眼罩对我们的眼睛有很多的好处，有些近视的人也会使用蒸汽眼罩，那么蒸汽眼罩对近视眼有好处吗？蒸汽眼罩对干眼症有好处吗？蒸汽眼罩……