在table中经常会见到scope-slot,说到这个就会想到插槽。
但是有一个简单易懂的想法,就是在template中可以获取到当前所在行的数据。
这一整行的数据对象就是scope。
scope属性的值有:row(行),column(列),$index(索引),store
但是这个scope-slot在2.6.0之后已经被弃用了。之后被v-slot代替。
<el-table
ref="filterTable"
:data="tableData"
style="width: 100%">
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址"
:formatter="formatter">
</el-table-column>
<el-table-column
prop="tag"
label="标签"
width="100"
:filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
:filter-method="filterTag"
filter-placement="bottom-end">
<template slot-scope="scope">
<el-tag
:type="scope.row.tag === '家' ? 'primary' : 'success'"
disable-transitions>{{scope.row.tag}}</el-tag>
</template>
</el-table-column>
</el-table>
</template>