<!-- tsx -->
<template>
<div class="package">
<div v-if="inlineButton&&inlineButton.length>0">
<a-button v-for="i,index in inlineButton"
:key="index"
:style="i.style"
:type="i.type"
:icon="i.icon"
@click="$emit(`${i.event}`)">{{i.name}}</a-button>
</div>
<a-table :columns="deaderName"
:data-source="tableData"
:loading="loading"
bordered
size="middle"
:pagination="false"
:scroll="{ x: 'calc(700px + 50%)', y: 240 }">
<span slot="operation"
slot-scope="operation">
<a-button v-for="t,index in operation"
:key="index"
:type="t.type"
@click="$emit(`${t.event}`,{index:index, t})">{{t.nameButton}}</a-button>
</span>
<span slot="status"
slot-scope="status">
<a-switch checked-children="显示"
un-checked-children="隐藏"
:default-checked="status" />
</span>
</a-table>
<a-pagination :default-current="pageNum"
:total="total"
@change="handleCurrentChange" />
</div>
</template>
<script >
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
export default {
// import引入的组件需要注入到对象中才能使用
name: "Tsx-table",
components: {},
props: {
// 是否分页
pagination: {
type: Boolean,
default: true
},
// 每页条数
pageSize: {
type: Number,
default: 10
},
// 总条数
total: {
type: Number,
default: 0
},
// 当前页码
pageNum: {
type: Number,
default: 1
},
// 是否显示复选框
selectable: {
type: Boolean,
default: false
},
// 是否显示序号列
sequence: {
type: Boolean,
default: false
},
// 是否显示导出
exportFile: {
type: Boolean,
default: false
},
// 是否边框线
border: {
type: Boolean,
default: true
},
// 导出文件名
fileName: {
type: String,
default: 'file.xlsx'
},
deaderName: { // 表头名
type: Array,
default: () => {
return [
{
title: '标题头一',
dataIndex: 'name',
key: 'name',
width: 100,
fixed: 'left',
},
{
title: 'Tags',
key: 'tags',
dataIndex: 'tags',
scopedSlots: { customRender: 'tags' },
},
{
title: '分级表名',
children: [
{
title: '表名',
dataIndex: 'age',
key: 'age',
width: 200,
},
],
},
{
operation: [
{
switchLeft: "显示",
type: "",
switchRight: "隐藏",
event: "inShow"
}
],
title: "状态",
displaylabel: "switch",
dataIndex: "status",
key: "status",
scopedSlots: { customRender: 'status' },
},
{
operation: [
{ nameButton: "查看", type: "", event: "see" },
{ nameButton: "删除", type: "", event: "outList" }
],
title: "操作",
displaylabel: "button",
dataIndex: 'operation',
key: 'operation',
scopedSlots: { customRender: 'operation' },
},
{
title: '数据',
dataIndex: 'gender',
key: 'gender',
width: 80,
fixed: 'right',
},
];
}
},
tableData: {
type: Array,
default: () => {
const data = [
{
name: "tsx", tags: "2", age: "18", status: true, gender: "测试", key: 1, operation: [{ nameButton: "查看", type: "", event: "see" },
{ nameButton: "删除", type: "", event: "outList" },]
}
];
return data
}
},
// 导出数据
exportData: {
type: Array,
default: () => {
return []
}
},
tableOperate: {
type: Array,
default: () => {
return []
}
},
inlineButton: { //头按钮
type: Array,
default: () => {
return []
}
},
tebleTitle: { // 表格标题
type: String,
default: ''
},
loading: { //头按钮
type: Boolean,
default: false
}
},
data () {
// 这里存放数据
return {
}
},
// 过滤器
filters: {},
// 监听属性 类似于data概念
computed: {},
// 监控data中的数据变化
watch: {},
// 方法集合
methods: {
handleCurrentChange (val) {
console.log(`当前页: ${val}`);
this.$emit("turnPages", { pageSize: val })
},
},
// 生命周期 - 创建完成（可以访问当前this实例）
created () { },
// 生命周期 - 挂载完成（可以访问DOM元素）
mounted () { },
beforeCreate () { }, // 生命周期 - 创建之前
beforeMount () { }, // 生命周期 - 挂载之前
beforeUpdate () { }, // 生命周期 - 更新之前
updated () { }, // 生命周期 - 更新之后
beforeDestroy () { }, // 生命周期 - 销毁之前
destroyed () { }, // 生命周期 - 销毁完成
ctivated () { } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
