vxe-table怎么改原码

Posted 2023-04-24

vxetable的原码可以通过以下步骤来改进：

1）检查编码风格：检查代码风格是否符合团队的开发标准，确保代码的可读性和维护性。

2）重构代码：使用重构技术来改进代码，使其结构更加清晰，模块之间的耦合度更低，可测试性更高。

3）添加有效的注释：注释可以帮助开发者更好的理解代码的逻辑，以及它的设计思路。

4）添加可维护性：添加可维护性代码，以及更易于调试的代码，以便在发现问题之后可以快速修复。

5）优化代码性能：将代码进行性能优化，以提升程序的运行效率，并减少程序运行时间。

6）添加安全性：添加安全性代码，以防止攻击者攻击程序，以及防止数据泄露。

7）编写测试代码：添加合理的测试代码，以检查代码的正确性，以及避免出现bug。

通过以上步骤，可以大大提升vxetable的代码质量，使其可以更好的实现其功能。 参考技术A 使用renren-fast快速开发项目时
引入了vxe-table编辑表格的组件，但是在使用过程中，对使用的组件原码逻辑进行了修改，如果上线本地修改的原码他人无法更新到，于是通过webpack打包，静态引入组件后缀为umd.js的主要文件，达到效果实现。
1.首先找到该组件合成后的主要文件并将其放置在static的plugins中2.webpack.base.config.js
设置externals参数，引入外部库，无需webpack打包处理

vue中vxe-table根据关键字文本内容高亮

效果：

 

 

代码：

①为table的vxe-table-column添加属性type="html"

1             <vxe-table-column field="openId" title="开放编号" min-width="150" align="left" header-align="center" sortable>
2             </vxe-table-column>
3             <vxe-table-column field="cardId" type="html" title="会员卡号" min-width="150" align="left" header-align="center" sortable>
4             </vxe-table-column>
5             <vxe-table-column field="nickName" type="html" title="会员昵称" min-width="150" align="left" header-align="center" sortable>
6             </vxe-table-column>

②添加代码高亮方法

1 highlightKeyword(val,keyword) {//高亮关键字
2         if (val.indexOf(keyword) !== -1) {
3           return val.replace(keyword, `<b style=\'color:#F86205;" style="color: rgb(255, 0, 0);">#ff0\'>${keyword}</b>`)
4         } else {
5           return val
6         }
7       }

③查询结果根据关键字给json插入html标签

 1 listEntity(this.queryParams).then(response => {
 2             this.tableList = response.rows
 3 
 4             //根据关键字高亮显示
 5             if(this.queryParams.keyword_LIKE.trim() !== ""){
 6               let keyword = this.queryParams.keyword_LIKE;
 7               this.tableList.forEach((item) => {
 8                 if ((item.cardId||"").indexOf(this.queryParams.keyword_LIKE) > -1) {
 9                   item.cardId = this.highlightKeyword(item.cardId,keyword)
10                 }
11                 if ((item.nickName||"").indexOf(this.queryParams.keyword_LIKE) > -1) {
12                   item.nickName = this.highlightKeyword(item.nickName,keyword)
13                 }
14                 if ((item.phone||"").indexOf(this.queryParams.keyword_LIKE) > -1) {
15                   item.phone = this.highlightKeyword(item.phone,keyword)
16                 }
17                 if ((item.address||"").indexOf(this.queryParams.keyword_LIKE) > -1) {
18                   item.address = this.highlightKeyword(item.address,keyword)
19                 }
20               })
21             }
22 
23             this.total = response.total
24             this.loading = false
25           })