datatable.directory codebase
https://datatable.directory/
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.
87 lines
2.2 KiB
87 lines
2.2 KiB
6 years ago
|
<template>
|
||
|
|
<table class="table table-hover table-sm table-fixed td-va-middle">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th style="width:3rem" class="border-top-0"></th>
|
||
|
|
<th style="width:3rem" class="border-top-0"></th>
|
||
|
|
<th v-for="col in columns" :class="colClasses(col)">{{col.title}}</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr v-for="row in rows" :style="rowStyle(row)">
|
||
|
|
<td>
|
||
|
|
<a href="" :class="['btn','btn-outline-danger',{'active': row._remove}]"
|
||
|
|
@click.prevent="toggleRowDelete(row._id)">
|
||
|
|
<v-icon :class="row._remove ? 'fa-undo' : 'fa-trash-o'"
|
||
|
|
:alt="row._remove ? 'Undo Remove' : 'Remove'" />
|
||
|
|
</a>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<a href="" class="btn btn-outline-secondary"
|
||
|
|
@click.prevent="toggleRowEditing(row._id)">
|
||
|
|
<v-icon :class="row._editing ? 'fa-save' : 'fa-pencil'"
|
||
|
|
:alt="row._editing ? 'Save' : 'Edit'" />
|
||
|
|
</a>
|
||
|
|
</td>
|
||
|
|
|
||
|
|
<template v-if="row._editing">
|
||
|
|
<td v-for="col in columns" class="pr-0">
|
||
|
|
<input v-model="row[col.id]" class="form-control" type="text">
|
||
|
|
</td>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<template v-else>
|
||
|
|
<td v-for="col in columns">
|
||
|
|
{{ row[col.id] || '' }}
|
||
|
|
</td>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
@import "base";
|
||
|
|
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
route: String,
|
||
|
|
xRows: Object, // key'd by _id
|
||
|
|
columns: Array,
|
||
|
|
},
|
||
|
|
data: function() {
|
||
|
|
return {
|
||
|
|
rows: this.xRows,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
toggleRowDelete(_id) {
|
||
|
|
this.$set(this.rows[_id], '_remove', !this.rows[_id]._remove);
|
||
|
|
},
|
||
|
|
toggleRowEditing(_id) {
|
||
|
|
this.$set(this.rows[_id], '_editing', !this.rows[_id]._editing);
|
||
|
|
},
|
||
|
|
colClasses(col) {
|
||
|
|
return [
|
||
|
|
'border-top-0',
|
||
|
|
{
|
||
|
|
'text-danger': col._remove,
|
||
|
|
'strike': col._remove,
|
||
|
|
'text-success': col._new
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
rowStyle(row) {
|
||
|
|
return {
|
||
|
|
opacity: row._remove? .8 : 1,
|
||
|
|
backgroundColor: row._remove? '#FFC4CC': 'transparent'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|