vue2.0之element table的使用
Posted 美力
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue2.0之element table的使用相关的知识,希望对你有一定的参考价值。
说明:
1.改变表头居中问题: 需要在el-table-column中添加 header-align="center"
<el-table :data="tableData" style="width: 100%" >
<el-table-column prop="date" header-align="center" label="日期">
</el-table-column>
<el-table-column prop="id" header-align="center" label="姓名">
<template slot-scope="scope">
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
data() {
return {
tableData: [{
date: ‘描述描述描述描述描述‘,
id: ‘0‘
}, {
date: ‘描述描述描述描述描述‘,
id: ‘1‘
}, {
date: ‘描述描述描述描述描述‘,
id: ‘2‘
}, {
date: ‘描述描述描述描述描述‘,
id: ‘3‘
}]
}
},
methods: {
handleDelete(index, row) {
alert(index+"row=="+row);
}
}
以上是关于vue2.0之element table的使用的主要内容,如果未能解决你的问题,请参考以下文章
element UI table 状态显示:禁用-启用 上架-下架