column-plus
v0.7.0
Published
## 说明
Downloads
11
Readme
column-plus
说明
这个column-plus是element ui的el-table中的el-table-column的升级版,主要是可以根据配置文件生成列
实例
<template>
<div class="hello">
<el-table :data="tabledata">
<el-table-column
type="index"
>
</el-table-column>
<columnPlus v-bind="item" v-for="(item, key) in columnsConfig" :key="key"></columnPlus>
<el-table-column>
<template slot-scope="scope">
{{scope.row.label}}--{{scope.row.num}}
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import columnPlus from '../package/column-plus'
export default {
name: 'HelloWorld',
props: {
msg: String
},
components: {
// eslint-disable-next-line vue/no-unused-components
columnPlus
},
data () {
return {
tabledata: [
{
label: '日期',
num: '180',
text: 'date'
}, {
label: '姓名',
num: '180',
text: 'name'
}, {
label: '地址',
num: '90',
text: 'address'
}
],
columnsConfig: [{
prop: 'label',
label: 'emun'
}, {
prop: 'num',
label: '数据'
}, {
prop: 'text',
label: '文案'
}, {
cellType: 'slots',
label: '操作',
renderCell: (scope) => {
return (
<el-button type="text" on-click={() => this.viewgoods(scope.row)}>
输出log
</el-button>
)
}
}]
}
},
methods: {
viewgoods (data) {
console.log(data)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>