element-plus+Vue3实现表格数据动态渲染

gurenchang

已于 2023-12-16 20:34:47 修改

阅读量5.6k

点赞数 3

文章标签： vue.js 前端 javascript elementui

于 2023-07-28 20:32:46 首次发布

本文链接：https://blog.csdn.net/gurenchang/article/details/131985588

版权

本文介绍了如何从零开始构建一个面试学习系统，重点分享了利用Element-Plus框架动态绑定后端获取的公司信息，包括公司名称、所在地、官网链接，并展示了如何处理数据以及创建交互功能，如点击按钮搜索面试记录。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：

最近跟小伙伴一起从0到1一起搭建一个面试学习系统，学习使用element-plus框架动态渲染从后端获取的数据，在这里跟诸位大佬一起分享：

话不多说，上代码：

    <div class="home_company">
      <el-table
        :data="getHomeShowAllCompany.companyArr"     //使用data属性动态绑定需要展示的数组
        height="auto"                                //height属性自适应
        border
        style="width: 100%"
      >
        //labal表示表头展示的名称  prop属性与数组中本列需要展示的数据名对应
        <el-table-column label="公司名称" prop="company_name">   
        </el-table-column>  
        <el-table-column label="公司所在地" prop="company_location">
        </el-table-column>
        <el-table-column label="公司官网" prop="website">
//如果你需要对数据进行其他的处理，你需要使用插槽scope.row.本行的任意属性名，即可以获得对应数据
          <template #default="scope">
            <a
              :href="scope.row.website"
              style="text-decoration: none; color: rgb(107, 164, 228)"
              >{{ scope.row.website }}</a
            >
          </template>
        </el-table-column>
        <el-table-column label="面试记录" width="90" align="center">
          <template #default="scope">
            <el-button
              type="primary"
              plain
              //插槽里的数据也可以作为参数进行传递
              @click="searchInterviewRecode(scope.row.ID)"
              >搜索</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
<script setup>
//引用仓库获取公司数据
import { homeShowAllCompanyStore } from "@/store/home";
import { showAllRecords } from "~~/api/index";
//将请求到的全部公司的数组存在getHomeShowAllCompany中
let getHomeShowAllCompany = homeShowAllCompanyStore();
//传递的参数
let company_name = ref("");
let company_location = ref("");
let scale = ref(0);
let page = ref(1);
let pageSize = ref(10);
function searchInterviewRecode(ID) {
  showAllRecords(ID);
}
</script>

后端返回数据展示：