avue——el-tooltip提示(form和crud)

7 篇文章 0 订阅

crud

  • 在option>column中设置headerslot: true,
  • slot=“对应字段名Header”
  • 添加下面的代码设置tip
<template slot="isPowerHeader" slot-scope="{ column }">
  <label>{{ column.label }}</label>
  <el-tooltip class="item" effect="dark" placement="bottom">
    <div slot="content">
      若人员无进出权限,需排查以下几点:<br />1、人员信息被停用;<br />2、人员积分为0;<br />3、人员培训考试有效期已到期。
    </div>
    <i
      class="el-icon-warning"
      style="margin-left: 3px; font-size: 14px"
    ></i>
  </el-tooltip>
</template>
{
 label: "进出权限",
   prop: "isPower",
   search: true,
   headerslot: true,
   width: 90,
   type: "select",
   dicData: [
     {
       label: "无",
       value: 1,
     },
     {
       label: "有",
       value: 0,
     },
   ],
 },

form

  • 在option>column中设置formslot: true,
  • slot=“对应的字段名”
  • 页面里设置相应的提示
 <template slot="isExam">
 	<div>
      <el-radio v-model="form.isExam" :label="1">是</el-radio>
      <el-radio v-model="form.isExam" :label="0" style="margin-right: 5px"
        >否</el-radio
      >
      <el-tooltip
        class="item"
        effect="dark"
        content="不安排培训考试的人员,必须填写证书信息。"
        placement="top-start"
      >
        <i class="el-icon-warning"></i>
      </el-tooltip>
    </div>
  </template>
{
    label: "安排培训考试",
     prop: "isExam",
     type: "radio",
     labelWidth: 130,
     span: "9",
     formslot: true,
     mock: {
       type: "dic",
     },
     valueDefault: 0,
     rules: {
       required: true,
       trigger: "change",
       message: "请选择安排培训考试",
     },
   },
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值