tabletext(封装table页面代码)
https://blog.csdn.net/weixin_43886711/article/details/102780607
ref="mutipleTable" @selection-change="handleSelectionChange" border> :width="column.width"> {{scope.row[column.prop]}} v-if="operates.list.filter(_x=>_x.show === true).length > 0"> //也可以换成el-button
@click="btn.method(key,scope.row)">{{ btn.label }}
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() {
console.log(4444)
this.$emit('handelAction')
}
},
}
.operate-group {
display: flex;
flex-direction: row;
justify-content: space-around;
}
引用页面
:columns="columns" :operates="operates">
:current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
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()
},
}
}