记录一下我在使用element中表格时的常用功能。
html部分:
//绑定数据源:data="searchUsers"
//指定100%的宽度可以自适应页面的宽度
<el-table :data="searchUsers" highlight-current-row v-loading="listLoading"
@selection-change="selsChange"style="width: 100%;">
<el-table-column type="selection">
</el-table-column>
//指定宽度和使用序号功能type=index
<el-table-column type="index" label="序号" width="100">
</el-table-column>
//prop的值就是绑定数据源对象里的键名
//formatter是一个很好用的功能,可以把值数据转换成想要显示的内容
<el-table-column prop="id" label="编码" :formatter="formatStatus">
</el-table-column>
//这里是操作按钮,关键点就是scope,通过scope.row可以获取到数据源里的值,
//例如row.id
<el-table-column label="操作" width="150">
<template scope="scope">
<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">停用</el-button>
</template>
</el-table-column>
</el-table>
js部份
//点击编辑按钮,接收参数
handleEdit: function (index, row) {
this.$router.push({
name: '添加科室',
params: {
id: row.id
}
})
},
// 点击停用按钮
handleDel(index, row) {
this.$confirm('确认停用该科室吗?', '提示', {
type: 'warning'
}).then(() => {
//调用接口
this.delApi(row.id)
})
},
// 预约状态值转换
formatStatus(row, column) {
let status = row.status
return status === 1 ? '已下架' : status === 2 ? '进行中' : status === 3 ? '已结束' : '全部'
},