vue语法使用 if 使用disabled

admin管理员组

文章数量:1641312

vue 语法中 使用if 去控制按钮显示内容 和 触发状态 通过表单中的数据去判断验证

<template>
  <div style="height: 100%;">
    <table-with-pag
        ref="table"
        :handler="handler"
        :forms="forms"
        table-index
        @tableItemSelected="onTableItemSelected"
    >
      <template slot="btns">
        <el-button
            type="primary"
            class="base-layout_search-form-btn"
            @click="search"
        >查询
        </el-button
        >
        <el-button
            type="primary"
            class="base-layout_search-form-btn"

            @click="createLink"
        >生成
        </el-button
        >
        <el-button
            type="primary"
            class="base-layout_search-form-btn"
            @click="$router.back()"
        >返回
        </el-button
        >

      </template>
      <el-table-column label="作品名称" prop="work_name"></el-table-column>
 
      <el-table-column label="操作">

        <template slot-scope="scope">
          <el-button size="mini"  type="success" v-if="scope.row.examine == 0" :disabled="scope.row.examine != '0'"   @click="handleEdit(scope.$index, scope.row)" >
            待审核
          </el-button>
          <el-button size="mini"  type="info" v-if="scope.row.examine == 1"  :disabled="scope.row.examine != '0'"    @click="handleEdit(scope.$index, scope.row)" >
            已审核
          </el-button>
          <el-button size="mini"  type="info" v-if="scope.row.examine == 2"   :disabled="scope.row.examine != '0'"   @click="handleEdit(scope.$index, scope.row)" >
            未通过
          </el-button>

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


    </table-with-pag>


    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="updateWorks">确 定</el-button>
    </span>

    <el-dialog
        title="提示"
        :visible.sync="dialogVisible1"
        width="30%"
        :before-close="handleClose">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible1 = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
  </span>
    </el-dialog>

  </div>
</template>

本文标签： 语法vuedisabled