前端标签之间的相互控制

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_37782076/article/details/84544435

任何状态都可以重置密码,启用状态可已禁用,禁用状态可以启用和删除。

<div class="table" style="margin-top:20px ">
        <el-table
          :data="developerTable"
          tooltip-effect="dark"
          style="width: 100%; font-size: 14px;"
          :default-sort = "{prop: 'tag', order: 'descending'}"
        >
          <el-table-column
          prop="devpType"
          label="企业类型"
          width="90"
          >
          <template slot-scope="scope">
            {{scope.row.devpType == '0' ? '企业' : '个人'}}
          </template>
        </el-table-column>
          <el-table-column
            prop="disableState"
            label="状态"
            width="90"
            >
            <template slot-scope="scope">
              {{scope.row.disableState == '0' ? '启用' : '禁用'}}
            </template>
          </el-table-column>
          <el-table-column
            prop="todo"
            label="操作">
            <template slot-scope="scope">
                <span @click="resetPassword(scope.row.devpId)" class="edit-operation" style="color: #20A0FF ">重置密码</span>
                <span @click="setDeveloperState(scope.row.devpId,'0')" :class="['edit-operation', scope.row.disableState == '0' ? 'disabled' : '']" >启用</span>
                <span style="border-left: 1px solid #EBEEF5;">
                    <el-dropdown trigger="click">
                        <span class="el-dropdown-link edit-operation-more">更多
                          <i class="el-icon-caret-bottom el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item class="clearfix">
                              <span @click="setDeveloperState(scope.row.devpId,'1')" :class="['edit-operation', scope.row.disableState == '1' ? 'disabled' : '']" >禁用</span>
                          </el-dropdown-item>
                          <el-dropdown-item class="clearfix">
                              <span @click="setDeveloperState(scope.row.devpId,'2')" :class="['edit-operation', scope.row.disableState == '0' ? 'disabled' : '']" >删除</span>
                          </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </span>
            </template>
          </el-table-column>
        </el-table>
      </div>





  .edit-operation {
    font-size: 14px;
    padding-left: 10px;
    padding-right: 10px;
    border-left: 1px solid #ebeef5;
    color: #20a0ff;
    cursor: pointer;
  }
  .edit-operation-more {
    color: #20a0ff;
    font-size: 14px;
    padding-left: 10px;
    padding-right: 10px;
    border-left: 1px solid #ebeef5;
    cursor: pointer;
  }
  .edit-operation:first-child {
    padding-left: 0px;
    padding-right: 10px;
    border-left: 0px solid #EBEEF5;
  }
  .disabled {
    cursor: default;
    color: #bbb;
    pointer-events: none;
  }

猜你喜欢

转载自blog.csdn.net/qq_37782076/article/details/84544435