<el-table-column type="selection" width="55"></el-table-column> <el-table-column prop="id" label="ID" width="80"></el-table-column> <el-table-column prop="name" label="文件名称"></el-table-column> <el-table-column prop="type" label="文件类型"></el-table-column> <el-table-column prop="size" label="文件大小(kb)"></el-table-column> <el-table-column label="下载"> <template slot-scope="scope"> <el-button type="primary" @click="download(scope.row.url)">下载</el-button> </template> </el-table-column> <el-table-column label="启用"> <template slot-scope="scope"> <el-switch v-model="scope.row.enable" active-color="#13ce66" inactive-color="#ccc" @change="changeEnable(scope.row)"></el-switch> </template> </el-table-column> <el-table-column label="操作" width="200" align="center"> <template slot-scope="scope"> <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='我再想想' icon="el-icon-info" icon-color="red" title="您确定删除吗?" @confirm="del(scope.row.id)" > <el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button> </el-popconfirm> </template> </el-table-column> </el-table> --------------------------------------------------------------------------------- data() { return { tableData: [],}} --------------------------------------------------------------------------------- load() { this.request.get("/file/page", { params: { pageNum: this.pageNum, pageSize: this.pageSize, name: this.name, } }).then(res => { this.tableData = res.data.records this.total = res.data.total })
复制
如上所示,scope.row是一个双向绑定的过程,当前行数据的获取也会用到插槽,scope相当于一行的数据, scope.row相当于当前行的数据对象。我们这里的scope绑定到了tableData。tableData在通过res.data.records调用返回值拿到后台数据库的数据,这样scope.row就会显示数据库对应条目数据,也可以进行传值到后端进行修改。
label是显示的文字
prop是对应获取数据的属性名
scope.row.xxx是获取相对应的一个表格中的数据
scope.$index是获取这一行的索引
注意:
①一定要用template包裹着才可以
②scope.row是获取这一行数据,scope.row.xxx是获取相对应的一个表格中的数据
③scope.$index是获取这一行的索引