先看下做出的效果：
html代码，其中listPlan.records是后台拿到的数据进行遍历
<template><ul class="list"><li style="height: 180px;width: 95%":key="index"v-for="(item, index) in listPlan.records":style="liStyle(index)"@click="selectItem(index,item.id)" ><span v-if="selectedIndex === index" class="shixin"></span><span v-if="selectedIndex === index" class="kongxin"></span><div class="notice"><div class="fsPnameDiv"><div class="fsPname" >{{ item.fsPname }}</div><div v-if="item.fsStatus=='00'" style="color: #0a8fe9"><span class="ant-badge-status-dot" style="background: rgb(68, 160, 239);"></span>激活</div><div v-if="item.fsStatus!='00'" style="color: rgb(208 213 217)"><span class="ant-badge-status-dot" style="background: rgb(208 213 217);"></span>禁用</div></div><div style="margin-top: 5px">每隔{{ item.fsExecinterval }} {{ item.fsExecintervaltype }} 执行一次</div><div style="margin-top: 5px">创建时间:{{ item.createTime }}</div></div></li></ul></template>ts代码
原理：选中时判断比较选中的下标是和循环中的游标一致改变样式
let planId=null;// 当前选中的索引
const selectedIndex = ref(-1);
// 动态生成 li 的样式
const liStyle = (index: number) => {return {border: '1px solid #ccc', // 添加边框borderRadius: '5px',padding: '10px', // 内边距margin: '5px 0', // 外边距cursor: 'pointer', // 鼠标指针样式position: 'relative', // 相对定位，用于放置箭头borderLeft: selectedIndex.value === index ? '2px solid rgb(9 95 240)' : '1px solid #ccc', // 选中时的框样式borderBottom: selectedIndex.value === index ? '2px solid rgb(9 95 240)' : '1px solid #ccc',borderTop: selectedIndex.value === index ? '2px solid rgb(9 95 240)' : '1px solid #ccc',borderRight: selectedIndex.value === index ? '2px solid rgb(9 95 240)' : '1px solid #ccc',};
};
css
原理：无大小的div设置30px的边框全透明，再单独设置要显示一侧边框的颜色和大框一致
<style lang="less" scoped>.notice{align-items: flex-start;display: flex;flex-direction: column;padding: 8px 8px 12px;
}.shixin {border: 10px solid transparent;border-left-color: #095ff0;position: absolute;top: 45%;right: -20px;
}
.kongxin {border: 10px solid transparent;border-left-color: #fff;position: absolute;top: 45%;right: -18px;
}
</style>参考：通过css画出带箭头的提示框 - 简书
