Element-UI对选有以下的代码demo,给出了多选表格的值显示方式,标粗的地方出现了scope.row;常规来讲,其实这个地方用变量也可以表达
常规可以用:prop="tomasfeng"
scope表示:scope.row.tomasfeng
scope.row
表示以下数据类型的一个数据体
[{},{},{},{}...],
scope.row相当于一个{},{}里边都是数据;按理说,列表里的数据是要供给表单展示,列表中的每个{}都是结构一样的,或者理解为包含的数据项相同。
例如({"tomasfeng":"我是Tomas","id":"1"},{"tomasfeng":"我是FH"},"id":"2"),包含相同的tomasfeng和id的key
所以:
scope.row.tomasfeng表示就是这个{}中的tomasfeng属性值。
ELE-UI代码地址:https://element.eleme.cn/#/zh-CN/component/table
<template> <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column label="日期" width="120"> <template slot-scope="scope">{{ scope.row.date }}</template>
这里的意思是:所有data()函数返回的值域中的date属性,因为tableData是一个数组[{},{},{}...],
其中都是{},{}。。。;这一个row就代表一个{},data就是{}中的data属性
</el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="地址" show-overflow-tooltip> </el-table-column> </el-table> <div style="margin-top: 20px"> <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button> <el-button @click="toggleSelection()">取消选择</el-button> </div> </template> <script> export default { data() { return { tableData: [{ date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-08', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-06', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-07', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }], multipleSelection: [] } }, methods: { toggleSelection(rows) { if (rows) { rows.forEach(row => { this.$refs.multipleTable.toggleRowSelection(row); }); } else { this.$refs.multipleTable.clearSelection(); } }, handleSelectionChange(val) { this.multipleSelection = val; } } } </script>
ok完事