＜el-button＞根据el-table条件改变显示值

最新推荐文章于 2023-10-17 10:34:43 发布

Lbwnb丶

最新推荐文章于 2023-10-17 10:34:43 发布

阅读量584

点赞数

文章标签：前端 javascript html elementui vue

本文链接：https://blog.csdn.net/qq_42403906/article/details/126246577

版权

想要使冻结这个按钮根据状态的改变而改变，话不多说直接上代码

    <el-table v-loading="loading" :data="diaryInfoList" @selection-change="handleSelectionChange" border >
          <el-table-column label="状态"    align="center" prop="deleted" >
            
           <template slot-scope="scope">
             <el-switch
            v-model="scope.row.deleted"
            :active-value="0"
            :inactive-value="1"
            disabled
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="changeDeleteSwitch(scope.row.deleted)"
          />
           </template>
          </el-table-column>
        
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" >
        <template slot-scope="scope">
        
         <el-button
           size="mini"
           type="text"
           icon="el-icon-delete"
           @click="handleDelete(scope.row)"
           v-hasPermi="['user:user:remove']"
         >   {{ scope.row.deleted == 0 ? '冻结' : '解除冻结' }}     </el-button>

        </template>
      </el-table-column>
    </el-table>

在el-button中使用 {{ scope.row.deleted == 条件 ? '值1' : '值2' }}，效果如下