el-table 单选,排序

65 阅读1分钟
    <template>
       <el-table 
            ref="multipleTable"
            :data="tableData"           
            style="width: 100%;margin-bottom: 0.1rem;"  
            border          
            @select="selectRow"
          >
    </template>
          
    <script>
       selectRow(val, row) {
          this.$refs.multipleTable.clearSelection();
          this.$refs.multipleTable.toggleRowSelection(row, true);
          //row 即为当前选中行   
        },
    </script>
    --------------------------
    <template>
      <el-table-column label="单位" prop="companyName" min-width="300px"  >
          <template slot="header">
            <span style="line-height: 0.31rem">单位</span>
            <div style="color: #2D83F8;height: 0.2rem;display: inline-block;">
              <i class="el-icon-caret-top" style="display: block;margin-bottom: -0.08rem;cursor: pointer" @click="sort('company_name','asc')"></i>
              <i class="el-icon-caret-bottom" style="cursor: pointer" @click="sort('company_name','desc')"></i>
            </div>
          </template>
          <template scope="scope">           
              {{scope.row.companyName? scope.row.companyName:'-'}}                 
          </template>
        </el-table-column>
    </template>
          
    <script>
    sort(name,val) {
      this.queryData.sort = val
      this.queryData.orderBy = name
      this.getData()
    }
    </script>