记录一下我在使用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 ? '已结束' : '全部' },