Setting up row components for element-ui table - vue.js

Question

just started using Vue and Element UI libraray but got stuck with their table component: https://element.eleme.io/#/en-US/component/table
I'd like to have a component for each table row to handle all logic related to that row (actions, click, etc.) in this component but checking their documentation looks like the components are column-based. What am I missing?

Answer 1

Let me show you how to use the basic el-table, such as processing the data of a row
var Main = {
data() {
return {
tableData: [{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}]
}
},
methods: {
handleEdit(index, row) {
console.log(index, row);
},
handleDelete(index, row) {
// Here you can access the row data (objects in the object array) to be deleted
console.log(index, row);
this.$confirm('This will permanently delete the record. Continue?', 'Warning', {
confirmButtonText: 'OK',
cancelButtonText: 'Cancel',
type: 'warning'
}).then(() => {
this.tableData.splice(index, 1);
this.$message({
type: 'success',
message: 'Delete completed'
});
}).catch(() => {
this.$message({
type: 'info',
message: 'Delete canceled'
});
});
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
#import url("//unpkg.com/element-ui#2.12.0/lib/theme-chalk/index.css");
<script src="//unpkg.com/vue/dist/vue.min.js"></script>
<script src="//unpkg.com/element-ui#2.12.0/lib/index.js"></script>
<div id="app">
<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
label="Date"
width="180">
<template slot-scope="scope">
<i class="el-icon-time"></i>
<span style="margin-left: 10px">{{ scope.row.date }}</span>
</template>
</el-table-column>
<el-table-column label="Name" width="180">
<template slot-scope="scope">
<el-tag size="medium">{{ scope.row.name }}</el-tag>
</template>
</el-table-column>
<el-table-column label="Operations">
<template slot-scope="scope">
<el-button
size="mini"
#click="handleEdit(scope.$index, scope.row)">Edit</el-button>
<el-button
size="mini"
type="danger"
#click="handleDelete(scope.$index, scope.row)">Delete</el-button>
</template>
</el-table-column>
</el-table>
</template>
</div>

Answer 2

Based on Sugars' answer you can toggle an input to allow edits throughout the columns on each row. I've made a simple demo based on his answer.
var Main = {
data() {
return {
tableData: [{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
editable: false
}, {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
editable: false
}, {
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
editable: false
}, {
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
editable: false
}]
}
},
methods: {
handleEdit(index, row) {
console.log(index, row);
row.editable = !row.editable;
},
handleDelete(index, row) {
// Here you can access the row data (objects in the object array) to be deleted
console.log(index, row);
this.$confirm('This will permanently delete the record. Continue?', 'Warning', {
confirmButtonText: 'OK',
cancelButtonText: 'Cancel',
type: 'warning'
}).then(() => {
this.tableData.splice(index, 1);
this.$message({
type: 'success',
message: 'Delete completed'
});
}).catch(() => {
this.$message({
type: 'info',
message: 'Delete canceled'
});
});
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
#import url("//unpkg.com/element-ui#2.12.0/lib/theme-chalk/index.css");
<script src="//unpkg.com/vue/dist/vue.min.js"></script>
<script src="//unpkg.com/element-ui#2.12.0/lib/index.js"></script>
<div id="app">
<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
label="Date"
width="180">
<template slot-scope="scope">
<i class="el-icon-time"></i>
<span style="margin-left: 10px" v-if="!scope.row.editable">{{ scope.row.date }}</span>
<el-date-picker v-model="scope.row.date" v-if="scope.row.editable"></el-date-picker>
</template>
</el-table-column>
<el-table-column label="Name" width="180">
<template slot-scope="scope">
<el-tag size="medium" v-if="!scope.row.editable">{{ scope.row.name }}</el-tag>
<el-input v-model="scope.row.name" v-if="scope.row.editable"></el-input>
</template>
</el-table-column>
<el-table-column label="Operations">
<template slot-scope="scope">
<el-button
size="mini"
#click="handleEdit(scope.$index, scope.row)">Edit</el-button>
<el-button
size="mini"
type="danger"
#click="handleDelete(scope.$index, scope.row)">Delete</el-button>
</template>
</el-table-column>
</el-table>
</template>
</div>