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>
~~~
