当前位置: 首页 > 工具软件 > Form Tooltip > 使用案例 >

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

涂羽
2023-12-01

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: "请选择安排培训考试",
     },
   },
 类似资料: