10 KiB
10 KiB
title, date, permalink
| title | date | permalink |
|---|---|---|
| 通用表格组件 | 2021-02-03 09:26:32 | /pages/1ab4ce/ |
通用表格组件
普通表格
普通表格，仅传入数据显示
::: details 代码块
ts版本
<template>
<div>
<table-head-co
ref="tableCo"
:form-list="tableList"
:table-heads="tableHead"
:width="200"
:cellAlign="center"
/>
</div>
</template>
<script>
import tableHeadCo from '@/components/CommonCo/tableHeadCo.vue'
import { Component, Prop, Vue } from 'vue-property-decorator'
@Component({
name: 'commonExample',
components: {
tableHeadCo,
}
})
export default class extends Vue {
tableHead:any[] = [
{ fieldName: 'date', nameCn: '日期', isHead: 1 },
{ fieldName: 'name', nameCn: '姓名', isHead: 1 },
{ fieldName: 'address', nameCn: '地址', isHead: 1 },
]
tableList:any[] = [{
date: '2016-05-02',
name: '小明',
address: '北京市海淀区中关村南四街'
}, {
date: '2016-05-04',
name: '小明',
address: '北京市海淀区中关村南四街'
}, {
date: '2016-05-01',
name: '小明',
address: '北京市海淀区中关村南四街'
}, {
date: '2016-05-03',
name: '小明',
address: '北京市海淀区中关村南四街'
}]
}
</script>
<style scoped>
</style>
js版本
<template>
<div>
<table-head-co
ref="tableCo"
:form-list="tableList"
:table-heads="tableHead"
:width="200"
:cellAlign="center"
/>
</div>
</template>
<script>
import tableHeadCo from '@/components/CommonCo/tableHeadCo.vue'
export default {
components: {
tableHeadCo
},
data(){
return {
tableHead: [
{ fieldName: 'date', nameCn: '日期', isHead: 1 },
{ fieldName: 'name', nameCn: '姓名', isHead: 1 },
{ fieldName: 'address', nameCn: '地址', isHead: 1 },
],
tableList: [{
date: '2016-05-02',
name: '小明',
address: '北京市海淀区中关村南四街'
}, {
date: '2016-05-04',
name: '小明',
address: '北京市海淀区中关村南四街'
}, {
date: '2016-05-01',
name: '小明',
address: '北京市海淀区中关村南四街'
}, {
date: '2016-05-03',
name: '小明',
address: '北京市海淀区中关村南四街'
}]
}
}
}
</script>
<style scoped>
</style>
:::
带复选框的表格
带复选框的表格，提供复选框回调函数，点击复选框时可打开控制台查看打印内容。
::: details 代码块
ts版本
<template>
<div>
<table-head-co
ref="tableCo"
:form-list="tableList"
:table-heads="tableHead"
:width="200"
:check-box-visible="true"
@handle-selection-change="handleSelectionChange"
/>
</div>
</template>
<script>
import tableHeadCo from '@/components/CommonCo/tableHeadCo.vue'
import { Component, Prop, Vue } from 'vue-property-decorator'
@Component({
name: 'commonExample',
components: {
tableHeadCo,
}
})
export default class extends Vue {
tableHead:any[] = [
{ fieldName: 'date', nameCn: '日期', isHead: 1 },
{ fieldName: 'name', nameCn: '姓名', isHead: 1 },
{ fieldName: 'address', nameCn: '地址', isHead: 1 },
]
tableList:any[] = [{
date: '2016-05-02',
name: '小明',
address: '北京市海淀区中关村南四街'
}, {
date: '2016-05-04',
name: '小明',
address: '北京市海淀区中关村南四街'
}, {
date: '2016-05-01',
name: '小明',
address: '北京市海淀区中关村南四街'
}, {
date: '2016-05-03',
name: '小明',
address: '北京市海淀区中关村南四街'
}]
// 复选框监听事件
handleSelectionChange(val){
console.log(val)
}
}
</script>
<style scoped>
</style>
js版本
<template>
<div>
<table-head-co
ref="tableCo"
:form-list="tableList"
:table-heads="tableHead"
:width="200"
:check-box-visible="true"
@handle-selection-change="handleSelectionChange"
/>
</div>
</template>
<script>
import tableHeadCo from '@/components/CommonCo/tableHeadCo.vue'
export default {
components: {
tableHeadCo
},
data(){
return {
tableHead: [
{ fieldName: 'date', nameCn: '日期', isHead: 1 },
{ fieldName: 'name', nameCn: '姓名', isHead: 1 },
{ fieldName: 'address', nameCn: '地址', isHead: 1 },
],
tableList: [{
date: '2016-05-02',
name: '小明',
address: '北京市海淀区中关村南四街'
}, {
date: '2016-05-04',
name: '小明',
address: '北京市海淀区中关村南四街'
}, {
date: '2016-05-01',
name: '小明',
address: '北京市海淀区中关村南四街'
}, {
date: '2016-05-03',
name: '小明',
address: '北京市海淀区中关村南四街'
}]
}
},
methods:{
// 复选框改变监听事件
handleSelectionChange(val){
console.log(val)
}
}
}
</script>
<style scoped>
</style>
:::
带插槽的表格
表格组件提供插槽功能，可以将插槽设置成按钮等其他功能，点击编辑按钮可以查看控制台打印内容。
::: details 代码块
ts版本
<template>
<div>
<table-head-co
ref="tableCo"
:form-list="tableList"
:table-heads="tableHead"
:width="200"
:slot-visible="true"
>
<template
v-slot="scope"
>
<el-button
size="mini"
@click="showEdit(scope.item.row)"
>
编辑
</el-button>
</template>
</table-head-co>
</div>
</template>
<script>
import tableHeadCo from '../Co/tableHeadCo'
import { Component, Prop, Vue } from 'vue-property-decorator'
@Component({
name: 'commonExample',
components: {
tableHeadCo,
}
})
export default class extends Vue {
tableHead:any[] = [
{ fieldName: 'date', nameCn: '日期', isHead: 1, commonWidth: 120 },
{ fieldName: 'name', nameCn: '姓名', isHead: 1, commonWidth: 100 },
{ fieldName: 'address', nameCn: '地址', isHead: 1 },
]
tableList:any[] = [{
date: '2016-05-02',
name: '小明',
address: '北京市海淀区中关村南四街'
}, {
date: '2016-05-04',
name: '小明',
address: '北京市海淀区中关村南四街'
}, {
date: '2016-05-01',
name: '小明',
address: '北京市海淀区中关村南四街'
}, {
date: '2016-05-03',
name: '小明',
address: '北京市海淀区中关村南四街'
}]
// 点击事件
showEdit(val){
console.log(val)
}
}
</script>
<style scoped>
</style>
js版本
<template>
<div>
<table-head-co
ref="tableCo"
:form-list="tableList"
:table-heads="tableHead"
:width="200"
:slot-visible="true"
>
<template
v-slot="scope"
>
<el-button
size="mini"
@click="showEdit(scope.item.row)"
>
编辑
</el-button>
</template>
</table-head-co>
</div>
</template>
<script>
import tableHeadCo from '@/components/CommonCo/tableHeadCo.vue'
export default {
components: {
tableHeadCo
},
data(){
return {
tableHead: [
{ fieldName: 'date', nameCn: '日期', isHead: 1, commonWidth: 120 },
{ fieldName: 'name', nameCn: '姓名', isHead: 1, commonWidth: 100 },
{ fieldName: 'address', nameCn: '地址', isHead: 1 },
],
tableList: [{
date: '2016-05-02',
name: '小明',
address: '北京市海淀区中关村南四街'
}, {
date: '2016-05-04',
name: '小明',
address: '北京市海淀区中关村南四街'
}, {
date: '2016-05-01',
name: '小明',
address: '北京市海淀区中关村南四街'
}, {
date: '2016-05-03',
name: '小明',
address: '北京市海淀区中关村南四街'
}]
}
},
methods:{
showEdit(val){
console.log(val)
}
}
}
</script>
<style scoped>
</style>
:::
Table Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| check-box-visible | 是否显示复选框 | Boolean | - | false |
| table-heads | 表头 | Array | - | - |
| form-list | 需要显示的数据 | Array | - | - |
| loading | 表格加载动画 | Boolean | - | false |
| formatter | 格式化表格数据 | Function(row, column, cellValue, index) | - | - |
| cellAlign | 表格对齐方式 | String | left/center/right | center |
| slotVisible | 是否显示操作列 | Boolean | - | false |
| width | 操作列的宽度 | Number | - | 200 |
Table Events
| 事件名 | 说明 | 参数 |
|---|---|---|
| handle-selection-change | 当用户手动勾选数据行的 Checkbox 时触发的事件 | row |
| handle-sort-change | 当表格的排序条件发生变化的时候会触发该事件 | column |
Table Slot
| name | 说明 |
|---|---|
| - | 用于放置在操作列上的按钮等元素，需要从scope.item中获取当前行的值 |
Table Header style
| name | 说明 |
|---|---|
| header-cell-style | 用于设置表头样式 |