99 lines
2.6 KiB
JavaScript
99 lines
2.6 KiB
JavaScript
(function(){
|
|
|
|
Vue.component('ln-table',{
|
|
model: {
|
|
prop: 'selectedRowIndex',
|
|
event: 'select'
|
|
},
|
|
props: {
|
|
columns: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
rows: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
selectedRowIndex: {
|
|
type: Number,
|
|
default: -1,
|
|
},
|
|
},
|
|
computed: {
|
|
selectedrow: {
|
|
get: function(){
|
|
return this.selectedRowIndex == -1 ? null : this.currentRows()[this.selectedRowIndex];
|
|
},
|
|
set: function(row){
|
|
let cr = this.currentRows();
|
|
for (let n=0;n<cr.length;n++)
|
|
{
|
|
let r = cr[n];
|
|
if (r===row)
|
|
{
|
|
console.log(n);
|
|
this.selectRow(n);
|
|
}
|
|
}
|
|
console.log('selectedrow: row not found!');
|
|
console.log(row);
|
|
}
|
|
}
|
|
},
|
|
data: function(){
|
|
return {};
|
|
},
|
|
methods: {
|
|
row: function(rowIndex){
|
|
return rowIndex == -1 ? null : this.currentRows()[rowIndex];
|
|
},
|
|
currentRows: function(){
|
|
return this.rows;
|
|
},
|
|
selectRow: function(rowIndex){
|
|
this.selectedRowIndex = rowIndex; //this.selectedrow === row ? null: row;
|
|
this.$emit('select', this.selectedRowIndex);
|
|
this.$emit('selectrow', this.selectedrow);
|
|
},
|
|
click: function(ev,rowIndex,columnKey){
|
|
ev.preventDefault();
|
|
this.selectRow(rowIndex);
|
|
this.emit('click', rowIndex, columnKey);
|
|
},
|
|
dblclick: function(ev,rowIndex, columnKey){
|
|
ev.preventDefault();
|
|
this.emit('dblclick', rowIndex, columnKey);
|
|
},
|
|
emit: function(signal,rowIndex,columnKey){
|
|
this.$emit(signal, { table: null, rowIndex, columnKey, row: this.row(rowIndex), });
|
|
},
|
|
},
|
|
template: `
|
|
<table class="ln-table">
|
|
<thead>
|
|
<tr>
|
|
<td
|
|
v-for="(column,key) in columns"
|
|
>{{ column.label }}</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr
|
|
v-for="(row,index) in currentRows()"
|
|
:selected="selectedRowIndex==index"
|
|
>
|
|
<td
|
|
v-for="(column,key) in columns"
|
|
@click="click($event,index,key)"
|
|
@dblclick="dblclick($event,index,key)"
|
|
>{{ row[key] }}</td>
|
|
</tr>
|
|
</tbody>
|
|
<tfooter>
|
|
</tfooter>
|
|
</table>
|
|
`,
|
|
});
|
|
|
|
})();
|