el-table表格组件中插槽scope.row的使用方法

在这里插入图片描述
要实现点击查看显示后端返回的字段并以文字渲染到页面上,就要是使用到插槽,下图是要实现的:
在这里插入图片描述

1 <el-table-column label="任职要求" width="100" align="center"> 2 <template slot-scope="scope"> 3 <el-popover placement="bottom" width="300" trigger="click"> 4 <div> 5 <div class="line">任职要求</div> 6 <div class="heighth"> 7 工作年限:<span>{{ scope.row.worked_year }}</span> 8 </div> 9 //给学历定义一个edutype方法,通过scope.row传参 10 <div class="heighth"> 11 学历:<span>{{ edutype(scope.row.education) }}</span> 12 </div> 13 <div class="heighth"> 14 专业:<span>{{ scope.row.major }}</span> 15 </div> 16 <div class="heighth"> 17 技能及经验:<span>{{ scope.row.experience_skills }}</span> 18 </div> 19 </div> 20 <el-button slot="reference" type="text">查看</el-button> 21 </el-popover> 22 </template> 23 </el-table-column> 24 25
1 methods: { 2 //通过row接受参数 3 edutype(row) { 4 // console.log(row); 5 if (row == "primary school") { 6 return "小学"; 7 } 8 if (row == "junior high school") { 9 return "初中"; 10 } 11 if (row == "senior high school") { 12 return "高中"; 13 } 14 if (row == "technical secondary school") { 15 return "中专"; 16 } 17 if (row == "junior college") { 18 return "大专"; 19 } 20 if (row == "undergraduate") { 21 return "本科"; 22 } 23 if (row == "graduate student") { 24 return "研究生"; 25 } 26 if (row == "unlimited") { 27 return "不限"; 28 } 29 } 30 } 31 32

这样就实现啦。。。。。

代码交流 2021