vue+element-uiパッケージtableテーブル
54191 ワード
パッケージtableページ(転載==転載に加えて改ページ)
参照tableページ
<template>
<div class="table">
<el-table id="iTable" v-loading.iTable="options.loading" :data="list" :stripe="options.stripe"
ref="mutipleTable" @selection-change="handleSelectionChange" border>
<!-- -->
<el-table-column v-if="options.mutiSelect" type="selection" style="width: 55px;">
</el-table-column>
<!--end-->
<!-- -->
<template v-for="(column, index) in columns">
<el-table-column :prop="column.prop" :key='column.label' :label="column.label" :align="column.align"
:width="column.width">
<template slot-scope="scope">
<template v-if="!column.render">
<template v-if="column.formatter">
<span v-html="column.formatter(scope.row, column)"></span>
</template>
<template v-else>
<span>{
{
scope.row[column.prop]}}</span>
</template>
</template>
<template v-else>
<expand-dom :column="column" :row="scope.row" :render="column.render" :index="index">
</expand-dom>
</template>
</template>
</el-table-column>
</template>
<!--end-->
<!-- -->
<el-table-column ref="fixedColumn" label=" " align="center" :width="operates.width" :fixed="operates.fixed"
v-if="operates.list.filter(_x=>_x.show === true).length > 0">
<template slot-scope="scope">
<div class="operate-group">
<template v-for="(btn, key) in operates.list">
<div class="item" v-if="btn.show" :key='btn.id'>
<span :style="btn.style" size="mini" :class="btn.class" :plain="btn.plain"
@click="btn.method(key,scope.row)">{
{
btn.label }}
</span>
<!-- <el-button :type="btn.type" size="mini" :icon="btn.icon" :disabled="btn.disabled"
:plain="btn.plain" @click.native.prevent="btn.method(key,scope.row)">{
{
btn.label }}
</el-button> -->
</div>
</template>
</div>
</template>
</el-table-column>
<!--end-->
</el-table>
</div>
</template>
<!--end-->
<script>
import {
mapGetters } from 'vuex';
export default {
props: {
list: {
type: Array,
default: []
}, //
columns: {
type: Array,
default: []
}, // === prop： ，label： ，align： ，width：
operates: {
}, // === label: ，type : （primary / success / warning / danger / info / text），show： ，icon： ，plain： ，disabled： ，method：
options: {
type: Object,
default: {
stripe: false, // table
highlightCurrentRow: false //
},
} // table
},
//
components: {
expandDom: {
functional: true,
props: {
row: Object,
render: Function,
index: Number,
column: {
type: Object,
default: null
}
},
render: (h, ctx) => {
const params = {
row: ctx.props.row,
index: ctx.props.index
}
if (ctx.props.column) params.column = ctx.props.column
return ctx.props.render(h, params)
}
}
},
//
data() {
return {
pageIndex: 1,
multipleSelection: [], //
}
},
mounted() {
},
computed: {
},
methods: {
//
handleSelectionChange(val) {
this.multipleSelection = val
this.$emit('handleSelectionChange', val)
},
//
showActionTableDialog() {
this.$emit('handelAction')
}
},
}
</script>
<style>
.operate-group {
display: flex;
flex-direction: row;
justify-content: space-around;
}
</style>
参照tableページ
<template>
<div class="app-container calendar-list-container">
<el-row>
<el-col :span="24">
<div>
<tabletext :list="list" @handleSelectionChange="handleSelectionChange" :options="options"
:columns="columns" :operates="operates">
</tabletext>
<div class="pagination-container">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]"
:page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper"
:total="total"> </el-pagination>
</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import tabletext from 'views/layout/tabletext';
import {
page } from 'api/dl/meter/index';
export default {
name: 'table1',
components: {
tabletext
},
computed: {
},
data() {
return {
list: [], // table
listQuery: {
page: 1,
limit: 20,
systemname: undefined
},
total: null,
options: {
stripe: true, // table
loading: false, // loading
highlightCurrentRow: true, //
mutiSelect: false, //
}, // table
columns: [
{
prop: 'meterid',
label: ' ID',
align: 'center',
}, {
prop: 'title',
label: ' ',
align: 'center',
formatter: (row, column, cellValue) => {
console.log(row.isenable)
console.log(row)
return `${
row.metername}`
}
},{
prop: 'meteraddress',
label: ' ',
align: 'center',
}, {
prop: 'magnification',
label: ' ',
align: 'center',
},{
prop: 'manufacturer',
label: ' ',
align: 'center',
},{
prop: 'metermodel',
label: ' ',
align: 'center',
},{
prop: 'meterrule',
label: ' ',
align: 'center',
},{
prop: 'cabinetnum',
label: ' ',
align: 'center',
},{
prop: 'remark',
label: ' ',
align: 'center',
},{
prop: 'isenable',
label: ' ',
align: 'center',
render: (h, params) => {
return h('span', {
}, params.row.isenable === '1' ? ' ' : params.row.isenable === '2' ? ' ' : '')
}
},
], //
//
operates: {
width: 150,
list: [
{
id: '1',
label: ' ',
style: 'cursor:pointer;color: #409eff;',
show: true,
class: 'el-icon-edit',
plain: true,
method: (scope, row) => {
console.log(scope)
console.log(row)
this.handleEdit(row)
}
},
{
id: '2',
label: ' ',
style: 'cursor:pointer;color: #b3450e;',
class: 'el-icon-delete',
show: true,
plain: false,
method: (index, row) => {
this.handleDel(row)
}
}
]
} //
}
},
created() {
this.getList();
},
methods: {
//
handleSelectionChange(val) {
console.log('val:', val)
},
//
handleEdit(index, row) {
console.log(' index:', index)
console.log(' row:', row)
},
//
handleDel(index, row) {
console.log(' index:', index)
console.log(' row:', row)
},
getList() {
console.log(this.listQuery)
page(this.listQuery).then(response => {
this.list = response.data.rows;
this.total = response.data.total;
})
},
handleSizeChange(val) {
console.log(val)
this.listQuery.limit = val;
this.getList()
},
handleCurrentChange(val) {
console.log(val)
this.listQuery.page = val;
this.getList()
},
}
}
</script>