html 列表页面
~~~
<el-table :data="data1" border style="width: 100%">
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="address" label="地址" >
</el-table-column>
<el-table-column label="操作" width="180">
<template slot-scope="scope">
<el-button size="small" @click="handleEdit(scope.row.id)">编辑</el-button>
</template>
</el-table-column>
</el-table>
~~~
获取***测试***列表数据
~~~
getData(){
this.data1 = [
{name:1,address:123},
{name:2,address:123}
]
}
~~~
获取***后台***列表数据
~~~
getInfo(){
this.apiGet('admin/test').then((res) => { //'admin/test' 更换接口
// console.log(res) //输出后台数据
this.handelResponse(res, (data) => {
this.data1 = data // data 后台定义的
})
})
},
created() {
this.getInfo()
},
~~~
删除
~~~
confirmDelete(item) {
this.$confirm('确认删除该文本回复吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
_g.openGlobalLoading()
this.apiDelete('admin/text/', item.id).then((res) => { // 'admin/text/'更换接口地址
_g.closeGlobalLoading()
this.handelResponse(res, (data) => {
_g.toastMsg('success', '删除成功')
setTimeout(() => {
_g.shallowRefresh(this.$route.name)
}, 1500)
})
})
}).catch(() => {
// handle error
})
~~~
完整代码
~~~
<template>
<div class="table">
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item><i class="el-icon-menu"></i> 测试</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="handle-box">
<el-button type="primary" class="handle-del mr10" @click="Add()">
<i class="el-icon-plus"></i> 添加
</el-button>
</div>
<el-table :data="data1" border style="width: 100%">
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="address" label="地址" >
</el-table-column>
<el-table-column label="操作" width="180">
<template slot-scope="scope">
<el-button size="small" @click="handleEdit(scope.row.id)">编辑</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination">
{{title}}
</div>
</div>
</template>
<script>
import http from '../../../../assets/js/http'
export default {
data() {
return {
data1:[],
title:123
}
},
created() {
this.getData()
},
methods: {
getData(){
// this.data1 = [
// {name:1,address:123},
// {name:2,address:123}
// ]
this.title = 456
this.apiGet('admin/test').then((res) => {
// console.log(res)
this.handelResponse(res, (data) => {
this.data1 = data
})
})
},
Add() {
router.push('/text/add')
},
handleEdit(id) {
router.push(`/text/edit/${id}`)
},
},
mixins: [http] //调用apiget 不要忘记
}
</script>
<style scoped>
.handle-box {
margin-bottom: 20px;
}
.handle-select {
width: 120px;
}
.handle-input {
width: 300px;
display: inline-block;
}
</style>
~~~
