|
<template>
<div id="app" style="width:1000px;background-color:cornsilk;margin:0 auto;padding:20px">
<div style="margin-top: 150px"></div>
<!-- 由后端接口返回的好处：
接口参数有任何变化，接口名称变更，后端直接更新即可，不用前端修改 ，减少了来回沟通的成本
组件提供了标准化，完整的基础功能，省去人为复制代码出现bug后修改的时间成本
省去的基础功能实现的细节，减少了功能细节缺胳膊少腿后期修补的时间成本 -->
<!-- 使用 auto="true" 根据接口返回的配置【自动生成列，按钮，增删改查调用】不用再写任何代码 -->
<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" 需要自己定义列和增删改查函数 -->
<myTable ref="table" :auto="false" :query="tableQuery">
<el-table-column label="id-插槽" prop="id"> </el-table-column>
<el-table-column label="内容列-插槽" 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>
|
