先看下做出的效果：

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画出带箭头的提示框 - 简书