Vue之scope.row的最简单理解

Vue之scope.row的最简单理解

 

 

 

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完事

上一篇:v-if 不生效----vue深入式响应原理


下一篇:瞄具的装配——Unity随手记(2021.3.1)