icon="el-icon-delete"
时间: 2024-02-22 13:37:16 浏览: 26
这是一个包含了icon属性的HTML标签,其中icon属性的值为"el-icon-delete",这个值通常用于指定该标签所对应的图标样式。具体来说,"el-icon-delete"是一个在Element UI框架中预定义的图标样式名称,表示一个垃圾桶的图标。在使用Element UI框架的时候,我们可以在需要的地方通过添加该图标样式名称来显示对应的图标。
相关问题
vue 怎么写个判断, <el-button type="text" size="mini" icon="el-icon-delete" @click="handleDelete(scope.row)" v-if="scope.row.finishTime" v-hasPermi="['workflow:process:remove']" >删除</el-button> <el-button type="text" size="mini" icon="el-icon-circle-close" @click="handleStop(scope.row)" >取消</el-button>,已完成显示删除,没完成显示取消
可以使用三元表达式来判断,代码如下:
```
<el-button
type="text"
size="mini"
icon="el-icon-{{ scope.row.finishTime ? 'delete' : 'circle-close' }}"
@click="scope.row.finishTime ? handleDelete(scope.row) : handleStop(scope.row)"
v-hasPermi="['workflow:process:remove']"
>
{{ scope.row.finishTime ? '删除' : '取消' }}
</el-button>
```
通过 `scope.row.finishTime` 来判断任务是否已完成,如果已完成,则按钮显示为删除,点击按钮调用 `handleDelete` 方法;如果未完成,则按钮显示为取消,点击按钮调用 `handleStop` 方法。同时使用插值语法来动态显示按钮文字。
<el-card> <el-row :gutter="10"> <el-col :span="10"> <el-input v-model="queryInfo.name" placeholder="请输入要查的病人姓名" clearable @clear="getData"> <el-button slot="append" icon="el-icon-search" @click="getData"></el-button> </el-input> </el-col> <el-col :span="14"> <el-button type="warning" icon="el-icon-delete" plain @click="batchdel()">批量删除</el-button> </el-col> </el-row>
这是一段使用了Element UI组件库的Vue.js代码,其中包含一个名为el-card的卡片组件,el-row和el-col是用来布局的栅格组件,:gutter="10"表示每个栅格之间的间距为10像素。在el-col中包含了一个el-input组件,用来输入病人姓名,同时有一个清空按钮和一个搜索按钮,@clear="getData"表示在清空输入框时调用getData函数,@click="getData"表示在点击搜索按钮时调用getData函数。另外,在el-row中还包含了一个用于批量删除的el-button组件,图标是el-icon-delete,颜色为警告色,@click="batchdel()"表示在点击按钮时调用batchdel函数。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)