vue+elementui中使用table表格添加状态

vue+elementui中使用table表格添加状态根据状态方便筛选数据。

Luffe船长

2714人浏览 · 2022-10-17 16:44:41

Luffe船长 · 2022-10-17 16:44:41 发布

项目场景：

vue+elementui中使用table表格添加状态根据状态方便筛选数据

解决方案：

我这里使用的是elementUI里面的标签组件添加的状态,如图所示:

红框圈起来的代码如下:

<el-col :span="1">
                                   <el-tag class="ml-2" type="warning" style="margin-left: 300%;margin-top: 10%;" size="default" @click="xxxx">病重({{0}})</el-tag>
                               </el-col>
                               <el-col :span="1">
                                   <el-tag class="ml-2" type="danger" style="margin-left: 300%;margin-top: 10%;" size="default" @click="xxxxx">急诊({{0}})</el-tag>
                               </el-col>
                               <el-col :span="1">
                                   <el-tag class="ml-2" type="success" style="margin-left: 300%;margin-top: 10%;" size="default" @click="xxxx">一般({{4}})</el-tag>
                               </el-col>

然后就是状态跟随那边的代码使用v-if进行判断然后达到图片上的效果,如果出不来可能是值不对或者试试v-show至于根据标签筛选数据那就把方法写好绑定到对应的标签上的点击事件就可以了

<el-table-column prop="xxxx" label="状态" min-width="36%" align="center">
                                   <template #default="scope">
                                       <el-tag type="success" size="default" v-if="scope.row.xxx == 3">一般</el-tag>
                                       <el-tag type="warning" size="default" v-if="scope.row.xxx== 2">急诊</el-tag>
                                       <el-tag type="danger" size="default" v-if="scope.row.xxx== 1">病重</el-tag>
                                       
                                       
                                   </template>
                               </el-table-column>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^