vue中用table_vue封装element中table组件

后台系统,table被用的次数比较多,所以决定提出来作为组件

1.新建一个Table.vue文件

ref="mutipleTable"

@selection-change="handleSelectionChange">

:key='column.label'

:label="column.label"

:align="column.align"

:width="column.width">

{{scope.row[column.prop]}}

v-if="operates.list.filter(_x=>_x.show === true).length > 0">

:plain="btn.plain" @click.native.prevent="btn.method(key,scope.row)">{{ btn.label }}

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')

}

}

}

2.调用组件

@handleSelectionChange="handleSelectionChange"

:options="options"

:columns="columns"

:operates="operates"

>

import iTable from '../components/Table'

export default {

components: {iTable},

data () {

return {

list: [

{

id: '24',

title: '编号3',

state:0

},

{

id: '23',

title: '编号3',

state:1

},

{

id: '23',

title: '编号3',

state:2

},

{

id: '2',

title: '编号3',

state:0

},

{

id: '223',

title: '编号3',

state:1

},

{

id: '2444',

title: '编号3',

state:1

},

], // table数据

options: {

stripe: true, // 是否为斑马纹 table

loading: false, // 是否添加表格loading加载动画

highlightCurrentRow: true, // 是否支持当前行高亮显示

mutiSelect: true, // 是否支持列表项选中功能

}, // table 的参数

columns: [

{

prop: 'id',

label: '编号',

align: 'center',

},

{

prop: 'title',

label: '标题',

align: 'center',

formatter: (row, column, cellValue) => {

return `${row.title}`

}

},

{

prop: 'state',

label: '状态',

align: 'center',

render: (h, params) => {

return h('el-tag', {

props: {type: params.row.state === 0 ? 'success' : params.row.state === 1 ? 'info' : 'danger'} // 组件的props

}, params.row.state === 0 ? '上架' : params.row.state === 1 ? '下架' : '审核中')

}

},

], // 需要展示的列

operates: {

width: 200,

fixed: 'right',

list: [

{

id:'1',

label: '编辑',

type: 'warning',

show: true,

icon: 'el-icon-edit',

plain: true,

disabled: false,

method: (index, row) => {

this.handleEdit(index, row)

}

},

{

id:'2',

label: '删除',

type: 'danger',

icon: 'el-icon-delete',

show: true,

plain: false,

disabled: false,

method: (index, row) => {

this.handleDel(index, row)

}

}

]

} // 列操作按钮

}

},

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)

}

}

}

https://juejin.im/post/5a6941dc518825732258e321