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

要实现点击查看显示后端返回的字段并以文字渲染到页面上,就要是使用到插槽,下图是要实现的:
el-table表格组件中插槽scope.row的使用方法_第1张图片

 <el-table-column label="任职要求" width="100" align="center">
            <template slot-scope="scope">
              <el-popover placement="bottom" width="300" trigger="click">
                <div>
                  <div class="line">任职要求</div>
                  <div class="heighth">
                    工作年限:<span>{{ scope.row.worked_year }}</span>
                  </div>
                  //给学历定义一个edutype方法,通过scope.row传参
                  <div class="heighth">
                    学历:<span>{{ edutype(scope.row.education) }}</span>
                  </div>
                  <div class="heighth">
                    专业:<span>{{ scope.row.major }}</span>
                  </div>
                  <div class="heighth">
                    技能及经验:<span>{{ scope.row.experience_skills }}</span>
                  </div>
                </div>
                <el-button slot="reference" type="text">查看</el-button>
              </el-popover>
            </template>
          </el-table-column>
 methods: {
    //通过row接受参数
    edutype(row) {
      // console.log(row);
      if (row == "primary school") {
        return "小学";
      }
      if (row == "junior high school") {
        return "初中";
      }
      if (row == "senior high school") {
        return "高中";
      }
      if (row == "technical secondary school") {
        return "中专";
      }
      if (row == "junior college") {
        return "大专";
      }
      if (row == "undergraduate") {
        return "本科";
      }
      if (row == "graduate student") {
        return "研究生";
      }
      if (row == "unlimited") {
        return "不限";
      }
    }
  }
这样就实现啦。。。。。

你可能感兴趣的:(JavaScript)