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

 

2022.4.11補充：

如果表單中只是對返回數據的字面量的顯示，prop和slot-scope沒有大的差異，開發過程中基本可以通用；

但是如果有一個表格顯示的不是數據，那就需要考慮使用插槽了。參考：https://www.cnblogs.com/Timeouting-Study/p/16129336.html

實現一個開關的選項：

 

 

 我的返回值是 N Y，不能直接顯示到這。

先是這么寫的：不生效

<el-table
      :data="targetTotalSettingData"
      :border="true">
<el-table-column
        prop="p9"
        label="是否停用"
        width="100">
          <el-switch
            v-model="data.p9"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="N"
            inactive-value="Y"
          >
          </el-switch>
      </el-table-column>
<el-table>

改成這樣子，效果可以正常實現

<el-table-column
        prop="p9" //這個刪掉也不影響
        label="是否停用"
        width="100">
        <template slot-scope="scope">
        <!-- //要想在表格中每個switch都單獨的控制，寫法v-mode=“scope.row.自己定義”  -->
          <el-switch
            v-model="scope.row.p9"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="N"
            inactive-value="Y"
          >
          </el-switch>
        </template>
      </el-table-column>

總結：后來想了一下官網給的示例沒有說要用到插槽，但是prop綁定值就出不了效果；原因是，我的開關是顯示在表格內部的，所以當表格數據多條時，每個表格都有單獨的開關值；官網的示例，開關在表單里，所以沒有指出要用 slot-scope。那么這樣結論呼之欲出了。slot-scope比prop多了一個表格內顯示的特性。