小需求：(vue2) 判断el-table某一行某一格里面是否包含‘百度‘两个字,如果包含，点击‘百度‘两个字跳转到‘百度‘页面，并给‘百度‘两个字加蓝色颜色
代码实现：
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column label="操作">
<template slot-scope="scope">
<!-- 使用 v-html 来渲染可能包含 HTML 的内容 -->
<div v-html="handleText(scope.row.content)"></div>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ content: '你好百度！' },
{ content: '你好程序员！' }
]
};
},
methods: {
handleText(text) {
// 使用正则表达式查找“百度”并包装成蓝色链接
const regex = /百度/g;
return text.replace(regex, (match) => `<a href="https//www.baidu.com" target="_blank" style="color:blue;text-decoration:underline">${match}</a>`);
}
}
};
</script>代码解释：
文本处理：`handleText` 方法中，使用正则表达式查找所有“百度”的出现，并将其替换为一个带有 `style="color: blue;"` 的链接。这样，点击的链接文本“百度”将显示为蓝色。
这样设置后，表格中的“百度”文字将显示为蓝色，并且点击时会打开新的标签页跳转到百度首页。