- <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是获取这一行的索引