mirror of
https://github.com/bs-community/blessing-skin-server.git
synced 2025-01-06 13:34:50 +08:00
48 lines
1.4 KiB
Vue
48 lines
1.4 KiB
Vue
|
<template>
|
||
|
|
<div class="vgt-table">
|
||
|
|
<input
|
||
|
|
class="vgt-input"
|
||
|
|
v-model="search"
|
||
|
|
@input="$emit('on-search', { searchTerm: search })"
|
||
|
|
>
|
||
|
|
<div v-if="rows.length === 0">No data</div>
|
||
|
|
<table v-else>
|
||
|
|
<tbody>
|
||
|
|
<tr v-for="(row, i) in rows" :key="i" :class="getRowClass(row)">
|
||
|
|
<td v-for="col in columns" :key="col.field">
|
||
|
|
<slot
|
||
|
|
name="table-row"
|
||
|
|
:row="Object.assign(row, { originalIndex: i })"
|
||
|
|
:column="{ field: col.field }"
|
||
|
|
:formattedRow="{ [col.field]: row[col.field] }"
|
||
|
|
></slot>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'VueGoodTable',
|
||
|
|
props: ['rows', 'columns', 'rowStyleClass'],
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
search: ''
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getRowClass(row) {
|
||
|
|
if (typeof this.rowStyleClass === 'function') {
|
||
|
|
return { [this.rowStyleClass(row)]: true };
|
||
|
|
} else if (typeof this.rowStyleClass === 'string') {
|
||
|
|
return { [this.rowStyleClass]: true };
|
||
|
|
} else {
|
||
|
|
return {};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|