vue el-table排序以及下拉框保存

最新推荐文章于 2024-03-13 15:54:07 发布

撸猫的咸鱼

最新推荐文章于 2024-03-13 15:54:07 发布

阅读量630

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/lgplrcode/article/details/119032649

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1、el-table排序

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="载入中"
      border
      fit
      stripe
      highlight-current-row
      :height="tableHeight"
      width="100%"
      @sort-change="sortChange">
      <el-table-column label="用户姓名" prop="real_name" sortable="custom" width="105px" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.real_name.length > 0">
            <span>{{ scope.row.real_name }}</span>
          </div>
          <div v-else>
            -
          </div>
        </template>
      </el-table-column>


      sortChange(column) {
        //console.log(column)
        if(column.order == "descending"){
          this.sort = 'DESC'
        }else if(column.order == "ascending"){
          this.sort = 'ASC'
        }
        this.sortKey = column.prop
        this.serach()
      },

效果：
在这里插入图片描述
2、效果：

    <el-table-column label="账户状态" prop="state" sortable="custom" width="300px" align="center">
        <template slot-scope="scope">
          <div v-if="!scope.row.bState">
            <div v-if="scope.row.state == 1">
              正常
              <el-button
                type="primary"
                v-if="!scope.row.bState && (role=='SUPERMANAGER'||role=='SUPER'||role=='COMPOS'||role=='MANAGER')"
                icon="el-icon-edit-outline"
                @click="handleEdit(scope.$index, scope.row)"
                circle>
              </el-button>
            </div>
            <div v-else-if="scope.row.state == 2">
              禁止交易
              <el-button
                type="primary"
                v-if="!scope.row.bState && (role=='SUPERMANAGER'||role=='SUPER'||role=='COMPOS'||role=='MANAGER')"
                icon="el-icon-edit-outline"
                @click="handleEdit(scope.$index, scope.row)"
                circle>
              </el-button>
            </div>
            <div v-else-if="scope.row.state == 3">
              禁止登陆
              <el-button
                type="primary"
                v-if="!scope.row.bState && (role=='SUPERMANAGER'||role=='SUPER'||role=='COMPOS'||role=='MANAGER')"
                icon="el-icon-edit-outline"
                @click="handleEdit(scope.$index, scope.row)"
                circle>
              </el-button>
            </div>
          </div>
          <div v-else>
            <el-select v-model="scope.row.state" class="filter-item" placeholder="Please select" style="width: 120px">
              <el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-button
              type="primary"
              v-if="scope.row.bState && (role=='SUPERMANAGER'||role=='SUPER'||role=='COMPOS'||role=='MANAGER')"
              @click="handleSave(scope.$index, scope.row)">保存
            </el-button>
            <el-button
              type="warning"
              v-if="scope.row.bState && (role=='SUPERMANAGER'||role=='SUPER'||role=='COMPOS'||role=='MANAGER')"
              @click="handleCancel(scope.$index, scope.row)">取消
            </el-button>
          </div>
        </template>
      </el-table-column>