list取第一个 vue_listvue

讲师列表

v-model="teacherQuery.begin"type="datetime"placeholder="选择开始时间"value-format="yyyy-MM-dd HH:mm:ss"

default-time="00:00:00"

/>

v-model="teacherQuery.end"type="datetime"placeholder="选择截止时间"value-format="yyyy-MM-dd HH:mm:ss"

default-time="00:00:00"

/>

查询

清空

:data="list"border

fit

highlight-current-row>

label="序号"width="70"align="center">

{{ (page- 1) * limit + scope.$index + 1}}

{{ scope.row.level===1?'高级讲师':'首席讲师'}}

修改

删除

:current-page="page":page-size="limit":total="total"style="padding: 30px 0; text-align: center;"layout="total, prev, pager, next, jumper"@current-change="getList"

/>

//引入调用teacher.js文件

import teacher from '@/api/edu/teacher'exportdefault{//写核心代码位置//data:{//},

data() { //定义变量和初始值

return{

list:null,//查询之后接口返回集合

page:1,//当前页

limit:10,//每页记录数

total:0,//总记录数

teacherQuery:{} //条件封装对象

}

},

created() {//页面渲染之前执行，一般调用methods定义的方法//调用

this.getList()

},

methods:{//创建具体的方法，调用teacher.js定义的方法//讲师列表的方法

getList(page=1) {this.page =page

teacher.getTeacherListPage(this.page,this.limit,this.teacherQuery)

.then(response=>{//请求成功//response接口返回的数据//console.log(response)

this.list =response.data.rowsthis.total =response.data.total

console.log(this.list)

console.log(this.total)

})

},

resetData() {//清空的方法//表单输入项数据清空

this.teacherQuery ={}//查询所有讲师数据

this.getList()

},//删除讲师的方法

removeDataById(id) {this.$confirm('此操作将永久删除讲师记录, 是否继续?', '提示', {

confirmButtonText:'确定',

cancelButtonText:'取消',

type:'warning'}).then(()=> { //点击确定，执行then方法//调用删除的方法

teacher.deleteTeacherId(id)

.then(response=>{//删除成功//提示信息

this.$message({

type:'success',

message:'删除成功!'});//回到列表页面

this.getList()

})

})//点击取消，执行catch方法

}

}

}