[JavaScript知识库]VUE.SCOPE的使用（如何将table中某行作为参数传入函数）

要理解scope，首先要引入一个场景

如下是一个普通的<el-table>

<el-table class="table" :data="datalist" border>
        <el-table-column label="身份证号" prop="id" align="center" min-width="140"></el-table-column>
        <el-table-column label="姓名" prop="name" align="center" min-width="180"></el-table-column>
        <el-table-column label="性别" prop="sex" align="center" min-width="100"></el-table-column>
        <el-table-column label="年龄" prop="age" align="center" min-width="180"></el-table-column>
        <el-table-column label="职业" prop="job" align="center" min-width="150"></el-table-column>
      </el-table>

如果其中的datalist数据结构如下

      datalist: [{
        id: '', // 身份证号
        name: '', // 姓名 
        sex: '', // 性别
        age: '', // 年龄
        job:  '', // 工作
        mate: '', // 配偶
        income: '', // 收入
        statement: '', // 家庭住址
      }],

要求不能增加column数，如何改写<el-table>，使得datalist的内容能够完整的展示出来。这个时候就要引入scope了

<el-table class="table" :data="datalist" border>
        <el-table-column label="身份证号" prop="id" align="center" min-width="100"></el-table-column>
        <el-table-column label="姓名" prop="name" align="center" min-width="100"></el-table-column>
        <el-table-column label="性别" prop="sex" align="center" min-width="100"></el-table-column>
        <el-table-column label="年龄" prop="age" align="center" min-width="100"></el-table-column>
        <el-table-column label="更多" align="center" min-width="300">
         <template slot-scope="scope">
                 <span>工作：{{scope.row.job}}</span>
                 <span>配偶：{{scope.row.mate}}</span>
                 <span>收入：{{scope.row.income}}</span>
                 <span>家庭住址：{{scope.row.statement}}</span>
            </template>

</el-table-column>
      </el-table>

可以看出，scope中存有datalist中的一行。

其实，是scope.row属性中存着datalist的改行，但是scope中存着整个datalist，并且详细地记录了每行数据在table的坐标。而且scope也是双向绑定的，也就是说，你直接访问datalist，改变datalist里某项值，scope里面相应的值就随着改变。.

细想一下，在template中scope可以扩展table的插值，在script中直接对datalist进行操作就可以改变scope的值，页面就可以实现更加复杂的内容。

回到题目中将table中某行作为参数传入函数就可以用到scope

<el-table class="table" :data="datalist" border>
        <el-table-column label="身份证号" prop="id" align="center" min-width="100"></el-table-column>
        <el-table-column label="姓名" prop="name" align="center" min-width="100"></el-table-column>
        <el-table-column label="性别" prop="sex" align="center" min-width="100"></el-table-column>
        <el-table-column label="年龄" prop="age" align="center" min-width="100"></el-table-column>
        <el-table-column label="更多" align="center" min-width="300">
         <template slot-scope="scope">
            <l-button @click="print(scope.row)">输出scope</l-button>
            </template>

</el-table-column>
      </el-table>

method: {
    print (obj) {
        console.log (obj)
        }
 }

?如此即可获取到table的一行。

阅读世界，共赴山海

423全民读书节，邀你共读