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

    <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" rel="external nofollow" 
              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>