vue+elementUI封裝一個根據(jù)后端變化的動態(tài)table(完整代碼)
更新時間：2022年08月31日 11:41:11 作者：212的s
這篇文章主要介紹了vue+elementUI,封裝一個根據(jù)后端變化的動態(tài)table,實現(xiàn)了自動生成和插槽兩個方式，主要把el-table 和el-pagination封裝在一起，結(jié)合示例代碼給大家介紹的非常詳細，需要的朋友可以參考下
實現(xiàn)了自動生成和插槽兩個方式，主要把 el-table 和el-pagination封裝在一起
效果圖：
使用組件，啟用自動生成 :auto="true"
自動生成-編輯 （包括請求已經(jīng)實現(xiàn)了）新增和刪除也是一樣
ps:如有額外的按鈕可以用插槽實現(xiàn)
查詢的時候，只需要多返回下面數(shù)據(jù)，就可以自動生成列，和對應操作按鈕
目錄
table.vue
<template>
<div>
<el-row v-if="auto">
<el-col :span="4">
<el-button size="small" type="primary" @click="add(table.buttons.add)">新增</el-button>
</el-col>
<el-col :span="20">
<div style="display: flex;justify-content: flex-end;margin:10px 0 10px 0">
<slot name="search"></slot>
<el-button size="small" type="primary" @click="filterData">查詢</el-button>
</div>
</el-col>
</el-row>
<el-row v-else>
<el-col :span="24" style="padding-top: 30px">?</el-col>
</el-row>
<el-table v-if="auto" v-loading="table.loading" :data="table.data" style="width: 100%">
<el-table-column v-for="(item,index) in table.columns" :key="index" :label="item.label+'-自動生成'" :prop="item.prop"></el-table-column>
<el-table-column label="操作-自動生成">
<template slot-scope="scope">
<el-button size="small" type="button" @click="edit(scope.row,table.buttons.edit)">編輯</el-button>
<el-button size="small" type="danger" @click="del(scope.row,table.buttons.del)">刪除</el-button>
</template>
</el-table-column>
</el-table>
<el-table v-if="!auto" v-loading="table.loading" :data="table.data" style="width: 100%">
<slot>
<el-table-column label="默認列" ></el-table-column>
</slot>
</el-table>
<el-pagination
background
:current-page="this.$parent.filters.pageIndex"
layout="total, sizes, prev, pager, next, jumper"
:page-size="this.$parent.filters.pageSize"
style="width: 50%;margin:20px auto 0px auto;text-align: center;"
:total="total"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
/>
</div>
</template>
<script>
export default ({
name:'table-test',
props: {
auto:{
type:Boolean,
default:()=>false,
},
query: {
type: Function,
default: ()=>null,
},
},
created(){
this.filterData()
},
data(){
return {
table:{
columns:[],
buttons:{},
data:[],
loading:false,
},
total:0
}
},
methods:{
handleCurrentChange(index) {
this.$parent.filters.pageIndex = index
this.filterData()
},
handleSizeChange() {},
filterData(){
this.table.loading=true
/* eslint-disable */
// debugger
if(this.query){
this.query().then(res=>{
this.table.data = res.data
this.table.columns =res.columns
this.table.buttons =res.buttons
this.total=res.totalCount
}).finally(()=>{
this.table.loading=false
})
}else{
console.error('table組件未設置query函數(shù)')
}
},
del(row,setting){
// this.table.data.splice(index,1)
this.$baseConfirm('你確定要刪除嗎?', null, () => {
this.fn(row,setting)
})
},
add(setting){
// 約定添加、編輯彈窗組件都叫 addIndex或者一個其它統(tǒng)一的名稱， 就可以實現(xiàn)通用
this.$parent.$refs.addIndex.show((form)=>this.fn(form,setting))
},
edit(row,setting){
this.$parent.$refs.addIndex.showEdit(()=>this.fn(row,setting),row)
},
fn(row,setting){
if(!row){
throw 'fn:row is null'
}
Object.keys(setting.data).forEach(x=> {
setting.data[x] = row[x]
})
Object.keys(setting.param).forEach(x=> {
setting.param[x] = row[x]
})
this.request({
url:setting.url,
mtehod:setting.method,
param:setting.param,
data:setting.data
}).then((res)=>{
this.$message.success(res.message)
this.filterData()
})
},
//模擬請求
request(param){
console.log('request',param)
return new Promise((res,rej)=>{
setTimeout(() => {
res({code:200,data:null,message:'ok'})
}, 100);
})
}
}
})
</script>
<style lang="scss" scoped>
table button{
margin-top:10px;
}
::v-deep{
.el-table .el-table__cell{
padding:8px 0;
}
.el-table__cell .el-button:first-child{
margin-left: 10px;
}
}
</style>index.vue
<template>
<div id="app" style="width:1000px;background-color:cornsilk;margin:0 auto;padding:20px">
<div style="margin-top: 150px"></div>
<!-- 由后端接口返回的好處：
接口參數(shù)有任何變化，接口名稱變更，后端直接更新即可，不用前端修改 ，減少了來回溝通的成本
組件提供了標準化，完整的基礎功能，省去人為復制代碼出現(xiàn)bug后修改的時間成本
省去的基礎功能實現(xiàn)的細節(jié)，減少了功能細節(jié)缺胳膊少腿后期修補的時間成本 -->
<!-- 使用 auto="true" 根據(jù)接口返回的配置【自動生成列，按鈕，增刪改查調(diào)用】不用再寫任何代碼 -->
<myTable ref="table" :auto="true" :query="tableQuery">
<template slot="search">
<el-form :inline="true" label-width="50px" style="height: 40px">
<el-form-item label="id">
<el-input v-model="filters.id" placeholder="" style="width:200px"></el-input>
</el-form-item>
<el-form-item label="名稱">
<el-input v-model="filters.name" placeholder="" style="width:200px"></el-input>
</el-form-item>
</el-form>
</template>
</myTable>
<!-- 使用 auto="false" 需要自己定義列和增刪改查函數(shù) -->
<myTable ref="table" :auto="false" :query="tableQuery">
<el-table-column label="id-插槽" prop="id"> </el-table-column>
<el-table-column label="內(nèi)容列-插槽" prop="name"></el-table-column>
<el-table-column label="操作-插槽" >
<template slot-scope="scope">
<el-button size="small" type="button" @click="edit(scope)">編輯</el-button>
<el-button size="small" type="button" @click="edit(scope)">編輯</el-button>
<el-button size="small" type="button" @click="edit(scope)">編輯</el-button>
<el-button size="small" type="button" @click="edit(scope)">編輯</el-button>
<el-button size="small" type="button" @click="edit(scope)">編輯</el-button>
<el-button size="small" type="button" @click="edit(scope)">編輯</el-button>
<el-button size="small" type="button" @click="edit(scope)">編輯</el-button>
<el-button size="small" type="danger" @click="del(scope.$index)">刪除</el-button>
</template>
</el-table-column>
</myTable>
<addIndex ref="addIndex"></addIndex>
</div>
</template>
<script>
import addIndex from '@/views/components/add.vue'
export default ({
name:'indexTest',
components:{addIndex},
data(){
return {
filters:{
pageIndex:1,
pageSize:5
}
}
},
methods:{
//模擬請求返回
tableQuery(){
console.log('filters',this.filters)
var p = new Promise((res,rej)=>{
console.log(rej)
setTimeout(() => {
var value ={
columns:[{label:'序號',prop:'id'},{label:'名稱',prop:'name'}],
buttons: {
add:{ url:'/controller/add',method:'post',data:{id:'',name:''},param:{}},
edit:{ url:'/controller/update',method:'post',data:{id:'',name:''},param:{}},
del:{url:'/controller/delete',method:'delete', data:{ },param:{id:''}}
},
data: [
{id:1,name:'測試1004' },
{id:2,name:'測試1009'},
// {id:3,name:'測試1009'},
// {id:4,name:'測試1009'},
// {id:5,name:'測試1009'},
// {id:6,name:'測試1009'},
// {id:7,name:'測試1009'},
// {id:8,name:'測試1009'},
// {id:9,name:'測試1009'},
// {id:10,name:'測試1009'},
],
totalCount:200};
value.data =value.data.filter(x=>this.where(x))
res(value)
}, 1000);
})
return p
},
where(x){
var a = this.filters.id ? x.id == this.filters.id : true
var b = this.filters.name ? x.name.indexOf( this.filters.name)>-1 : true
var r = a && b
return r
},
edit(){},
del(){}
}
})
</script>
<style lang="scss" scoped>
table button{
margin-top:10px;
}
</style>add.vue
<template>
<el-dialog :title="title"
width="30%"
:close-on-click-modal="false"
:visible.sync="visible">
<el-form ref="form" :model="form" :rules="rules" :label-width="'120px'">
<el-form-item label="id" prop="id">
<el-input v-model="form.id" placeholder=""></el-input>
</el-form-item>
<el-form-item label="名稱" prop="name">
<el-input v-model="form.name" placeholder=""></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="visible = false">取 消</el-button>
<el-button type="primary" @click="add()">確 定</el-button>
</div>
</el-dialog>
</template>
<script>
export default ({
name:'addTest',
data(){
return {
title:'新增',
visible:false,
form:{},
rules:{},
save:null,
}
},
methods:{
show(save,form){
this.visible=true
this.save=save
this.form =form?form:{}
},
showEdit(save,form){
this.title='編輯'
this.show(save,form)
},
add(){
if(this.save!=null){
this.save(this.form)
}
else{
this.$message.success('ok2')
}
this.visible=false
}
}
})
</script>到此這篇關于vue+elementUI,封裝一個根據(jù)后端變化的動態(tài)table的文章就介紹到這了,更多相關vue elementUI封裝table內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue ElementUI的from表單實現(xiàn)登錄效果的示例
本文主要介紹了vue ElementUI的from表單實現(xiàn)登錄效果的示例，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要給大家介紹了關于vue指令和插值的相關資料,大家應該對指令和插值都不陌生,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了Vue Mint UI mt-swipe的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
Vue實現(xiàn) 點擊顯示再點擊隱藏效果(點擊頁面空白區(qū)域也隱藏效果)
這篇文章主要介紹了Vue實現(xiàn) 點擊顯示 再點擊隱藏 點擊頁面空白區(qū)域也隱藏效果,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01
二維碼是一種廣泛應用于各種場合的編碼方式，它可以將信息編碼成一張二維圖案，方便快捷地傳遞信息，在Vue.js中，我們可以使用一些庫和組件來實現(xiàn)二維碼的生成和掃描，本文將介紹如何在Vue中實現(xiàn)二維碼的生成和掃描的方法2023-06-06
vue+vue-fullpage實現(xiàn)整屏滾動頁面的示例代碼(直播平臺源碼)
這篇文章主要介紹了vue+vue-fullpage實現(xiàn)整屏滾動頁面,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
footer為公用組件，其他頁面都需要引入。接下來通過本文給大家分享vue項目中公用footer組件底部位置的適配問題,需要的朋友可以參考下2018-05-05
這篇文章主要介紹了Vue高級特性概念原理，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2023-03-03
vue2.0 根據(jù)狀態(tài)值進行樣式的改變展示方法
下面小編就為大家分享一篇vue2.0 根據(jù)狀態(tài)值進行樣式的改變展示方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要為大家詳細介紹了vue如何安裝使用Quill富文本編輯器，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-09-09