<ul class="list">
? ? ?<li v-for="(item,index) in liList" v-on:click="addClass(index)" v-bind:class="{?
? ? ? ? ?ischeck:index==current}">{{item.title}}</li>
</ul>

data () {
? ? return {
? ? ? ? ? ? current:0,
? ? ? ? ? ? liList:[
? ? ? ? ? ? ? ? {title:'中國(guó)'},
? ? ? ? ? ? ? ? {title:'美國(guó)'},
? ? ? ? ? ? ? ? {title:'英國(guó)'},
? ? ? ? ? ? ? ? {title:'法國(guó)'}
? ? ? ? ? ? ]
? ? }
},
methods:{?? ?
? ? addClass:function(index){
? ? ? ? ? this.current=index
? ? }
} ?

.ischeck ?{
? ? background: #e6e6e6;
? ? height: 30px;
? ? width: 50px;
? ? line-height: 0px;
? ? padding: 15px 10px;
}

<el-table-column prop="sfgh" label="是否歸還" align="center">
? ? ? ? ? ? ? ? <template scope="scope">
? ? ? ? ? ? ? ? ? ? <p v-if="scope.row.sfgh=='0'">
? ? ? ? ? ? ? ? ? ? ? ? <el-button ?href="javascript:void(0)" @click="getWzghInfo(scope.$index, scope.row)">已歸還</el-button>
? ? ? ? ? ? ? ? ? ? </p>
? ? ? ? ? ? ? ? ? ? <p v-if="scope.row.sfgh=='1'">未歸還</p>
? ? ? ? ? ? ? ? ? ? <p v-if="scope.row.sfgh=='2'">未還清</p>
? ? ? ? ? ? ? ? </template>
? ? ? ? ? ? </el-table-column>

<el-table-column label="狀態(tài)" :formatter="statusFormat">
</el-table-column>
 
methods: {
     statusFormat: function(row, column) {
        let status = row.status;
        let statusW = "未繳費(fèi)";
        if(status == undefined) {     
              statusW = "未繳費(fèi)";     
        }  
       switch(status) {
           case 1:
           statusW = "已繳費(fèi)";
           break;
          case 2:
          statusW = "退款申請(qǐng)中";
          break;
     }
       return statusW;
 }
}