<el-select v-model="slideClassId" @change="slideClassSelect" class="slide-class-select">
<el-option v-for="item in slideClassList" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
<!-- 修改按钮 -->
<el-button @click="changeListOrder()" type="primary" plain class="change-list-order">修改显示顺序</el-button>
<el-table :data="slideList" style="width: 100%" :border='true' v-loading="loading">
<el-table-column label="显示顺序" width="100">
<template slot-scope="scope">
<el-input v-model="listOrder[scope.$index]" type="number"></el-input>
</template>
</el-table-column>
<el-table-column label="ID" prop="id" width="50"></el-table-column>
<el-table-column label="标题" prop="title"></el-table-column>
<el-table-column label="链接" prop="url"></el-table-column>
<el-table-column label="显示状态" width="80">
<template slot-scope="scope">
<div>{{slideList[scope.$index].status == 1 ? '显示' : '隐藏'}}</div>
</template>
</el-table-column>
<el-table-column label="图片" width="80">
<template slot-scope="scope">
<el-button type="text" size="small" @click="checkImg(scope.row)">查看</el-button>
</template>
</el-table-column>
<el-table-column label="操作" width="180">
<template slot-scope="scope">
<el-button type="text" size="small" @click="changeStatus(scope.row)">{{scope.row.status == 0 ? '显示' : '隐藏'}}</el-button>
<el-button type="text" size="small" @click="openSlideEdit(scope.row)">编辑</el-button>
<el-button type="text" size="small" @click="deleteSlide(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
js代码
// 显示 & 隐藏
changeStatus(row) {
row.status == 1 ? row.status = 0 : row.status = 1;
apis.slideHide({id: row.id, status: row.status, token: this.$root.token}, function(bck) {
this.$alert(bck.info, {
confirmButtonText: '确定',
callback: action => {
if(bck.code != 0) {
this.reload();
//刷新后就会跳转回原始页面
}
else {
location.reload();
}
}
});
}.bind(this))
},