vue-ele-tables
v1.0.5
Published
>基于Element-ui封装的表格,支持Element表格的所有属性,用数据生产可配置的表格,支持插槽,自定义配置表格。
Downloads
19
Maintainers
Readme
简介
基于Element-ui封装的表格,支持Element表格的所有属性,用数据生产可配置的表格,支持插槽,表格树,自定义配置表格等。
安装
注意:使用之前请确保是否安装好了element-ui组件,目前仅支持Vue 2.x
#使用 npm安装 npm install vue-ele-tables #使用 yarn安装 yarn add vue-ele-tables
使用
<template>
<div class="tables">
<eleTable
@tabList="tabList"
:api="api"
:table-data="tableData"
:query="query"
:tableLabel="tableLabel">
<!-- 状态 -->
<template slot="status" slot-scope="scope">
<el-switch
v-model="scope.row.status"
active-color="#13ce66"
inactive-color="#ff4949"/>
</template>
<!-- 操作 -->
<template slot="edit" slot-scope="scope">
<el-button type="text" @click="edit(scope.row)">编辑</el-button>
</template>
</eleTable>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import eleTable from 'vue-ele-tables'
export default Vue.extend({
name: 'tables',
components: { eleTable },
data(){
return{
api: {
url: '/list/table',
method: 'post',
token: '850ee157-363a-4f76-8e93-111187159dd7'
},
tableData: [],
tableLabel: [
{ prop: 'name', label: '姓名' },
{ prop: 'age', label: '年龄' },
{ prop: 'sex', label: '性别' },
{ prop: 'email', label: '邮箱' },
{ prop: 'msg', label: '文本' },
{ prop: 'status', label: '状态', template: true },
],
query: {
pageNumber: 1,
pageSize: 10,
name: '',
status: null,
}
}
},
methods:{
tabList(res, query){
let data = res.data.page
data.forEach(item => {
item.status === 1 ? item.status = true : item.status = false
item.sex === 1 ? item.sex = '男' : item.sex = '女'
})
this.tableData = data
query.total = res.data.total
},
edit(val){
console.log(val)
const h = this.$createElement;
this.$notify({
position: 'top-left',
showClose: false,
message: h(
'i',
{ style: 'color: #202124' },
`${ val.name } ${ val.age } ${ val.email }`)
});
}
}
});
</script>
文档地址
http://web_saul.gitee.io/vue-ele-tables-file/#/