You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
91 lines
1.7 KiB
91 lines
1.7 KiB
<!--
|
|
* @Author: your name
|
|
* @Date: 2021-10-09 18:16:42
|
|
* @LastEditTime: 2021-10-22 14:28:45
|
|
* @LastEditors: Please set LastEditors
|
|
* @Description: In User Settings Edit
|
|
* @FilePath: /data-show/src/components/v-table/index.vue
|
|
-->
|
|
|
|
|
|
<script>
|
|
export default {
|
|
name: "v-table",
|
|
props: {
|
|
columns: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
data: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
},
|
|
watch: {
|
|
columns: {
|
|
handler(val) {
|
|
if (val.length > 0) {
|
|
this.tbColumns = [...val];
|
|
}
|
|
},
|
|
immediate: true,
|
|
},
|
|
data: {
|
|
handler(val) {
|
|
if (val.length > 0) {
|
|
this.tbData = [...val];
|
|
}
|
|
},
|
|
immediate: true,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
tbData: [],
|
|
tbColumns: [],
|
|
};
|
|
},
|
|
render () {
|
|
const on = {
|
|
...this.$listeners
|
|
}
|
|
const props = {
|
|
...this.$attrs,
|
|
...this.$props,
|
|
...{
|
|
dataSource: this.tbData,
|
|
columns: this.tbColumns
|
|
}
|
|
}
|
|
const isRedRow = this.isRedRow;
|
|
const slots = Object.keys(this.$slots).map(slot => {
|
|
return (
|
|
<template slot={slot}>{this.$slots[slot]}</template>
|
|
)
|
|
})
|
|
const table = (
|
|
<a-table props={props} scopedSlots={this.$scopedSlots} on={on} row-class-name={isRedRow} row-key='id'>
|
|
{slots}
|
|
</a-table>
|
|
)
|
|
return (
|
|
<div class="v-table">{table}</div>
|
|
)
|
|
},
|
|
methods: {
|
|
isRedRow(record, index) {
|
|
let className = "";
|
|
className = index % 2 === 0 ? "evenRow" : "oddRow";
|
|
return className;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.v-table {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
</style>
|