[update]table组件重构

This commit is contained in:
OrangeM21
2020-03-27 20:33:24 +08:00
parent 8b06b6f3be
commit 97c310107a
8 changed files with 271 additions and 102 deletions

View File

@@ -0,0 +1,35 @@
<template>
<div>
<el-button type="primary" size="small" @click="handleClick">{{ this.$t('users.createUser') }}</el-button>
<el-select v-model="value" size="small" placeholder="请选择" style="width:150px; margin-left:10px;">
<el-option label="批量删除" value="delete" />
</el-select>
<el-button style="margin-left:10px;" type="primary" size="small" @click="handleAction">执行</el-button>
</div>
</template>
<script>
export default {
prop: {
},
data() {
return {
value: ''
}
},
methods: {
handleClick() {
this.$emit('newClick')
},
handleAction() {
this.$emit('actionClick', this.value)
}
}
}
</script>
<style lang="less" scoped>
</style>

View File

@@ -0,0 +1,27 @@
<template>
<div>
<el-input v-model="input" placeholder="搜索..." class="input-with-select" size="small" clearable @input="serachAction">
<el-button slot="append" icon="el-icon-search" />
</el-input>
</div>
</template>
<script>
export default {
data() {
return {
input: ''
}
},
methods: {
serachAction(val) {
this.$emit('serachAction', val)
}
}
}
</script>
<style lang="less" scoped>
</style>

View File

@@ -0,0 +1,198 @@
<template>
<div>
<div style="display:flex;flex-direction:row;justify-content:space-between;">
<!--TODO: 事件交互 -->
<headeraction v-if="hasHeader" class="actionHeader" style="display:flex;flex-direction:row;" @newClick="handleNewClick" @actionClick="handleActionClick" />
<!-- TODO: 事件交互 -->
<search v-if="hasSearch" class="search" @serachAction="handleSearch" />
<slot name="header" />
</div>
<div class="table">
<el-table
v-loading="loading"
:data="tabledata"
stripe
border
>
<el-table-column
v-if="hasSelect"
type="selection"
align="center"
width="42px"
header-align="center"
/>
<el-table-column
v-for="col of columns"
:key="col.props"
align="center"
:label="col.label"
:sortable="col.sortable"
header-align="center"
>
<template slot-scope="scope">
<el-button v-if="col.link" type="text" size="small" style="font-size:14px" @click="$router.push({name: col.link, params: { id: scope.row.id }})">{{ scope.row[col.key] }}</el-button>
<span v-else>{{ scope.row[col.key] }}</span>
</template>
</el-table-column>
<slot name="status" />
<el-table-column
v-if="action !== []"
:label="this.$t('usergroup.action')"
align="center"
width="140px"
header-align="center"
>
<template slot-scope="scope">
<el-button
size="mini"
type="primary"
@click="handleEdit(scope.$index, scope.row)"
>{{ $t('usergroup.update') }}</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)"
>{{ $t('usergroup.delete') }}</el-button>
</template>
</el-table-column>
<slot name="extraAction" />
</el-table>
<el-pagination
style="text-align:center;margin-top:20px;"
:current-page="current_page"
:page-sizes="[10, 20, 50, 100]"
:page-size="page_size"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</div>
</template>
<script>
/* eslint-disable no-unused-vars */
import search from './search'
import headeraction from './headeraction'
const _vm = this
export default {
name: 'Tables',
components: {
search,
headeraction
},
props: {
getData: {
type: Function,
default: () => []
},
hasSelect: {
type: Boolean,
default: false
},
columns: {
type: Array,
default: () => []
},
hasSearch: {
type: Boolean,
default: () => true
},
hasHeader: {
type: Boolean,
default: () => true
},
action: {
type: Object,
default: () => {}
}
},
data() {
return {
tabledata: [],
loading: false,
page_size: 10,
current_page: 1,
total: 0,
offset: 0,
headeractiontext: 'title'
}
},
created() {
this.get(this.current_page, this.page_size, this.offset)
},
methods: {
handleSizeChange(val) {
this.offset = (this.current_page - 1) * val
this.page_size = val
this.get(this.current_page, val, this.offset)
},
handleCurrentChange(val) {
this.offset = (val - 1) * this.page_size
this.current_page = val
this.get(val, this.page_size, this.offset)
},
handleSearch(val) {
this.loading = true
this.getData({ search: val, draw: this.current_page, limit: this.page_size, offset: this.offset }, { row: 1 }).then(response => {
console.log(response)
this.tabledata = response.results
this.total = response.count
this.loading = false
})
},
handleEdit: function(index, row) {
try {
this.$router.push({ name: this.action.hasEdit, params: { id: row.id }})
} catch (error) {
console.log(error)
}
},
handleNewClick: function() {
try {
this.$router.push({ name: this.action.newClick, params: { id: 'create' }})
} catch (error) {
console.log(error)
}
},
handleActionClick: function() {
},
handleDelete: function(index, row) {
},
get(draw, limit, offset) {
this.loading = true
this.getData({ draw, limit, offset }, { row: 1 }).then(response => {
console.log(response)
this.tabledata = response.results
this.total = response.count
this.loading = false
})
}
}
}
</script>
<style lang="less" scoped>
.el-table /deep/ .el-table__row > td {
padding: 0 !important;
}
.el-table /deep/ .el-table__row > td> div > span {
text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.el-table /deep/ .el-table__header > thead > tr >th {
padding:3px !important;
background-color: #F5F5F6;
font-size: 13px;
}
.table{
margin-top: 15px;
}
</style>

1
src/components/index.js Normal file
View File

@@ -0,0 +1 @@
export { default as Tables } from './ListTables/table.vue'

View File

@@ -1,97 +0,0 @@
<template>
<div>
<el-table
v-loading="loading"
:data="tabledata"
>
<el-table-column
v-if="hasSelect"
type="selection"
align="center"
header-align="center"
/>
<el-table-column
v-for="col of columns"
:key="col.props"
:label="col.label"
>
<template slot-scope="scope">
<el-button v-if="col.nextroute" type="text" size="small" style="font-size:14px" @click="$router.push({name: col.nextroute, params: { id: scope.row.id }})">{{ scope.row[col.key] }}</el-button>
<span v-else>{{ scope.row[col.key] }}</span>
</template>
</el-table-column>
<slot name="action" />
</el-table>
<el-pagination
style="text-align:center;margin-top:20px;"
:current-page="current_page"
:page-sizes="[10, 20, 50, 100]"
:page-size="page_size"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</template>
<script>
// import ElDataTableColumn from '@/components/el-data-table/components/el-data-table-column'
export default {
components: {
// ElDataTableColumn
},
props: {
getData: {
type: Function,
default: () => []
},
hasSelect: {
type: Boolean,
default: false
},
columns: {
type: Array,
default: () => []
}
},
data() {
return {
tabledata: [],
loading: false,
page_size: 10,
current_page: 1,
total: 0
}
},
created() {
this.get(this.current_page, this.page_size, this.offset)
},
methods: {
handleSizeChange(val) {
this.offset = (this.current_page - 1) * val
this.page_size = val
this.get(this.current_page, val, this.offset)
},
handleCurrentChange(val) {
this.offset = (val - 1) * this.page_size
this.current_page = val
this.get(val, this.page_size, this.offset)
},
get(draw, limit, offset) {
this.loading = true
this.getData({ draw, limit, offset }, { row: 1 }).then(response => {
console.log(response)
this.tabledata = response.results
this.total = response.count
this.loading = false
})
}
}
}
</script>
<style>
</style>

View File

@@ -2,8 +2,6 @@ export { default as NavBar } from './NavBar'
export { default as NavHeader } from './NavHeader'
export { default as AppMain } from './AppMain'
export { default as Page } from './Page'
export { default as ListTables } from './ListTables'
export { default as Tables } from './ListTables/table.vue'
export { default as TagsView } from './TagsView'
export { default as Footer } from './Footer'
export { default as IBox } from './IBox'

View File

@@ -9,7 +9,8 @@
</template>
<script>
import { IBox, Page, Tables } from '@/layout/components'
import { IBox, Page } from '@/layout/components'
import Tables from '@/components/ListTables/table'
import { getUserGroupList } from '@/api/user'
export default {
components: {
@@ -27,7 +28,8 @@ export default {
prop: 'name',
label: this.$t('usergroup.name'),
key: 'name',
nextroute: 'UserDetail'
link: 'UserDetail',
sortable: true
},
{
prop: 'user',
@@ -39,7 +41,12 @@ export default {
label: this.$t('usergroup.comment'),
key: 'comment'
}
]
],
// 写路由名字table组件会自动传作为参数
action: {
hasEdit: 'UserGroupEdit',
newClick: 'UserGroupEdit'
}
}
}
}