elementUI的el-table组件标题后面加图标

在这里插入图片描述

<el-table-column label="综合得分" align="right" prop="score">
        <template slot="header" slot-scope="scope">
          <span>综合得分</span>
          <el-tooltip
            class="item question"
            effect="dark"
            content="平均分。"
            placement="top-start"
          >
            <i class="el-icon-question"></i>
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <span>{{ scope.row.score }}</span>
        </template>
      </el-table-column>
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-table中使用el-input进行编辑时,可以根据需要添加错误提示信息。可以通过以下解决方案来实现: 1. 首先,为el-table的每列添加el-input组件。可以使用v-model指令绑定每列的值。 2. 对于需要错误提示的列,在el-input上添加一个错误提示的元素,比如一个图标或文字。 3. 在el-input的值改变时,可以使用@input事件监听输入。可以在这个事件处理函数中进行验证逻辑。 4. 在验证逻辑中,可以使用正则表达式来验证输入的内容是否符合要求。如果不符合要求,可以设置错误提示的内容,然后显示错误提示。 参考代码如下: ``` <el-table :data="tableData"> <el-table-column prop="name" label="名称"> <template slot-scope="scope"> <el-input v-model="scope.row.name" @input="validateInput(scope.row)"></el-input> <span v-if="scope.row.showErr" class="error-message">{{ scope.row.errMsg }}</span> </template> </el-table-column> <!-- 其他列的定义 --> </el-table> ``` ``` methods: { validateInput(row) { if (!row.name) { row.errMsg = '请输入名称'; row.showErr = true; } else { row.errMsg = ''; row.showErr = false; } } } ``` 这样,在el-table中使用el-input进行编辑时,可以实现错误提示的效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [el-table表格修改每列使用el-input对其做错误提示](https://blog.csdn.net/migexiaoliang/article/details/126236093)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* [【elementuiel-table中的el-input校验](https://blog.csdn.net/bidepanm/article/details/126172141)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值