组件
<template>
<div>
<el-table
:data="tableData"
stripe
ref="DyTable"
style="width: 100%"
v-loading="listLoading"
v-bind="tableConfig"
:height="height"
:header-cell-class-name="cellClass"
v-on="tableListeners"
>
<template v-for="(item, index) in columns">
<el-table-column
v-if="item.type"
:key="index"
:type="item.type"
v-bind="item"
:width="item.width || ''"
></el-table-column>
<el-table-column
v-else-if="item.dataCode"
:key="index"
:prop="item.prop"
v-bind="item"
:width="item.width || ''"
>
<template #default="{ row }">
<t-code
:dataCode="item.prop"
:dataCodeValue="row[item.prop]"
></t-code>
</template>
</el-table-column>
<el-table-column
v-else-if="item.slot"
:key="index"
:label="item.label"
:prop="item.prop"
:width="item.width || ''"
>
<template #default="{ row }">
<slot :name="item.prop" v-bind:row="row"></slot>
</template>
</el-table-column>
<el-table-column
v-else
v-bind="item"
:key="index"
:width="item.width || ''"
:label="item.label"
:prop="item.prop"
></el-table-column>
</template>
</el-table>
<div class="pagination" v-if="remote">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
prev-text="上一页"
next-text="下一页"
:current-page="query.pageNum"
:page-sizes="[10, 20, 30, 40]"
:page-size="query.pageSize"
layout="total, sizes, prev, pager, next, jumper,slot"
:total="query.total"
></el-pagination>
</div>
</div>
</template>
<script>
import { fetchTablelist } from '@/api/TetchTable/index'
import tCode from './components/tCode'
export default {
name: 'DyTable',
props: {
columns: {
type: Array,
require: true,
default: () => {
return []
},
},
tableConfig:{
type: Object,
default: () => {
return {}
},
},
tableListeners:{
type: Object,
default: () => {
return {}
},
},
name: {
type: String,
require: true,
default: 'DyTable',
},
selection: {
type: Boolean,
default: false,
},
remote: {
type: Boolean,
default: true,
},
selectlist: {
//选中的项 row-key 必须设置
type: Array,
default: () => {
return []
},
},
url: {
type: String,
default: '',
},
// 5-31 增加测试数据 后期使用接口
tableData: {
type: Array,
},
},
data() {
return {
height: this.$baseTableHeight() - 250,
//tableData: [{sex:2},{sex:1}],
listLoading: false,
query: {
pageSize: 4,
pageNum: 1,
total: 0,
},
}
},
components: { tCode },
created() {},
mounted() {
if (this.remote) {
this.fetchTable({})
this.handlerSelecter()
}
},
methods: {
cellClass(row) {
if (row.columnIndex === 0 && this.selection) {
return 'DisableSelection'
} else {
return ''
}
},
handlerSelecter() {
if (this.tableConfig['row-key'] && this.selectlist.length > 0) {
this.tableData.map((item) => {
if (this.selectlist.includes(item[this.tableConfig['row-key']])) {
this.toggleRowSelection(item, true)
} else {
this.toggleRowSelection(item, false)
}
})
}
},
toggleAllSelection() {
this.$refs['DyTable'].toggleAllSelection()
},
toggleRowSelection(row, flag) {
this.$refs['DyTable'].toggleRowSelection(row, flag)
},
async fetchTable(queryParames) {
try {
const Loading = this.$baseLoading(1)
const query = Object.assign({}, this.query, queryParames)
let data = await fetchTablelist({ url: this.url, query })
// 5-31 增加测试数据 后期使用接口
// this.tableData = data.list
// this.query.total = data.total
this.listLoading = false
Loading.close()
} catch (error) {
return this.$message.error(error)
this.listLoading = false
}
},
handleSizeChange(val) {
this.query.pageSize = val
this.$parent.search()
},
handleCurrentChange(val) {
this.query.pageNum = val
this.$parent.search()
},
setTables(arr) {
this.tableData = [...arr];
this.handlerSelecte();
},
},
}
</script>
<style lang="scss" scoped>
.el-dropdown-link {
cursor: pointer;
color: #409eff;
}
.el-icon-arrow-down {
font-size: 12px;
}
.sureJump {
width: 60px;
height: 28px;
line-height: 28px;
display: inline-block;
background: #ffffff;
border: 1px solid rgb(220, 223, 230);
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000c17;
margin-left: 15px;
cursor: pointer;
}
::v-deep .el-table .DisableSelection .cell .el-checkbox__inner {
display: none !important;
position: relative;
}
::v-deep .el-table .DisableSelection .cell:before {
content: '';
position: absolute;
}
.pagination {
display: flex;
justify-content: flex-end;
flex-direction: row;
::v-deep.btn-prev {
width: 80px;
height: 28px;
background: #ffffff;
border: 1px solid rgb(220, 223, 230);
}
::v-deep.el-pagination button:disabled {
background: rgba(0, 12, 23, 0.1);
}
::v-deep.btn-next {
width: 80px;
height: 28px;
background: #ffffff;
border: 1px solid rgb(220, 223, 230);
}
::v-deep.el-pagination.is-background .el-pager li:not(.disabled).active {
background-color: #2f54eb !important;
}
}
</style>
使用
<DyTable
ref="myDyTable"
:selectlist="selectlist"
:tableData="tableData"
:tableListeners="tableListeners"
:tableConfig="tableConfig"
:columns="columns"
>
<template v-slot:control="{ row }">
<el-button
type="text"
icon="el-icon-sell"
@click="confirmdocuments(row)"
>
交单
</el-button>
<el-button
type="text"
icon="el-icon-delete"
class="danger Line"
@click="handlerDelete"
>
删除
</el-button>
<el-dropdown @command="handlercommand">
<el-button
type="text"
icon="el-icon-sell"
class="el-dropdown-link"
@click="confirmdocuments(row)"
>
更多
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="{ type: 'edit', parames: row }">
黄金糕
</el-dropdown-item>
<el-dropdown-item :command="{ type: 'edit', parames: row }">
狮子头
</el-dropdown-item>
<el-dropdown-item :command="{ type: 'edit', parames: row }">
螺蛳粉
</el-dropdown-item>
<el-dropdown-item :command="{ type: 'edit', parames: row }">
双皮奶
</el-dropdown-item>
<el-dropdown-item :command="{ type: 'edit', parames: row }">
蚵仔煎
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</DyTable>
export default {
name: 'CostManagement',
data() {
return {
tableConfig: { // Dytable配置
key: 'myDyTable',
'tree-props': { children: 'children', hasChildren: 'hasChildren' },
'row-key': 'id',
},
tableListeners: {
// Dytable监听事件
select: (selection, row) => {
this.selectTable(selection, row)
},
'select-all': (selection) => {
this.selectTableAll(selection)
},
},
selects: [],
selectlist: [1, 2, 3],
formInline: {},
tableData: [
{
id: 1,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
},
{
id: 2,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
},
{
id: 3,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
children: [
{
id: 31,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
},
{
id: 32,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
},
{
id: 33,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
},
{
id: 34,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
},
{
id: 35,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
},
{
id: 36,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
},
],
},
{
id: 4,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
},
],
columns: [
{
type: 'selection',
},
{
label: 'id',
prop: 'id',
},
{
label: 'date',
prop: 'date',
},
{
label: 'name',
prop: 'name',
},
{
label: 'address',
prop: 'address',
},
{
label: '操作',
prop: 'control',
slot: true,
},
],
}
},
methods: {
toggleAllSelection() {
this.$refs.myDyTable.toggleAllSelection()
},
cancelSelect() {
let selects = [...this.$refs.myDyTable.$refs.DyTable.selection]
selects.forEach((row) => {
this.$refs.myDyTable.toggleRowSelection(row, false)
})
},
selectTableAll(selection) {
this.selects = selection
console.log('selection', selection)
},
selectTable(selection, row) {
this.selects = selection
console.log('selection', selection)
console.log(
'this.$refs.myDyTable.selection',
this.$refs.myDyTable.$refs.DyTable.selection
) //获取表格选中所有项
},
},
}