【踩坑记录：＜el-radio＞单选按钮v-for里实现每个选择项单独提示】

辣机小司

已于 2024-06-03 16:21:55 修改

阅读量855

点赞数 3

分类专栏：踩坑实战经验 # VUE 文章标签： vue.js javascript 前端

于 2024-06-03 16:20:19 首次发布

本文链接：https://blog.csdn.net/weixin_44126778/article/details/139413906

版权

踩坑实战经验同时被 2 个专栏收录

9 篇文章

订阅专栏

VUE

2 篇文章

订阅专栏

项目场景：

写vue页面的时候，一般我们加提示直接在每个选项上使用<el-tooltip>来实现提示，但如果我们的单选用的是v-for循环的方式，怎么实现每个选项上提示呢，网上相关搜索基本无果，借此记录一下。

原始样例

tip会出现在整行的中间：

<div>
  <el-form>
    <el-form-item :label="$t('测试')">
      <el-tooltip
         placement="top"
         effect="dark"
         :content="$t('整行中间的的tip~~~~~~~~~~~~~~~~~~~')"
      >
        <el-radio-group v-model="radio">
          <el-radio :label="0">编辑</el-radio>
          <el-radio :label="1">展示</el-radio>
          <el-radio :label="2">禁用</el-radio>
        </el-radio-group>
      </el-tooltip>
    </el-form-item>
  </el-form>
</div>

样式：
在这里插入图片描述

tip出现在每个选项上：

<div>
  <el-form>
    <el-form-item :label="$t('测试')">
      <el-radio-group v-model="radio">
        <el-tooltip
          placement="top"
          effect="dark"
          :content="$t('编辑tip')"
        >
          <el-radio :label="0">编辑</el-radio>
        </el-tooltip>
        <el-tooltip
          placement="top"
          effect="dark"
          :content="$t('展示tip')"
        >
          <el-radio :label="1">展示</el-radio>
        </el-tooltip>
        <el-tooltip
          placement="top"
          effect="dark"
          :content="$t('禁用tip')"
        >
          <el-radio :label="2">禁用</el-radio>
        </el-tooltip>
      </el-radio-group>
    </el-form-item>
  </el-form>
</div>

样式：
在这里插入图片描述

v-for模式：

先上代码：vue

<div>
  <el-form>
    <el-form-item :label="$t('测试')">
      <el-radio-group v-model="radio">
        <el-radio
          v-for="(item, index) in radioSelectOptional"
          :key="index"
          :label="item.value"
        >
          <el-tooltip
            placement="top"
            effect="dark"
            :content="item.tip"
          >
            <span >{{ item.label }} </span>
          </el-tooltip>
        </el-radio>
      </el-radio-group>
    </el-form-item>
  </el-form>
</div>

js：

export const spaceTemplateSelectOptional = [
  {
    value: 0,
    label: i18n.t('编辑'),
    tip: '编辑:~~~~~~~'
  },
  {
    value: 1,
    label: i18n.t('展示'),
    tip: '展示:~~~~~~~'
  },
  {
    value: 2,
    label: i18n.t('禁用'),
    tip: '禁用:~~~~~~~'
  },
];