直接上代码:
<template>
<div class="gather-info">
<section class="gather-item">
<el-table
:data="data.table"
style="width: 100%"
stripe
max-height="250"
>
<el-table-column prop="time" label="时间" fixed>
</el-table-column>
<el-table-column prop="content" label="描述">
<template #default="scope">
<el-tooltip
effect="light"
placement="top-start"
raw-content
:content="processNewLine(scope.row.content)"
>
<span> {{ scope.row.content.substring(0, 24) + "..." }}</span>
</el-tooltip>
</template>
</el-table-column>
</el-table>
</section>
</div>
</template>
<script setup>
const data = reactive({
table: [
{
time: "2023/9/13 5:53",
content:"content 属性虽然支持传入 HTML 片段,
但是在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 XSS 攻击。
因此在 raw-content 打开的情况下,请确保 content 的内容是可信的,
永远不要将用户提交的内容赋值给 content 属性。",
},]
})
const processNewLine = (val) => {
if (val.length > 30) {
//通过match方法在字符串内检索指定的值,然后进行匹配,里面的20,就是你想间隔的字符位数。
val = val.match(/.{1,30}/g).join("<br/>");
} else {
val = val;
}
return val;
};
onMounted(async () => {
});
</script>