快捷導(dǎo)航

element-plus+Vue3實(shí)現(xiàn)表格數(shù)據(jù)動(dòng)態(tài)渲染

更新時(shí)間：2024年03月12日 15:09:28 作者：gurenchang

在Vue中,el-table是element-ui提供的強(qiáng)大表格組件,可以用于展示靜態(tài)和動(dòng)態(tài)表格數(shù)據(jù),本文主要介紹了element-plus+Vue3實(shí)現(xiàn)表格數(shù)據(jù)動(dòng)態(tài)渲染,感興趣的可以了解一下

前言：

最近跟小伙伴一起從0到1一起搭建一個(gè)面試學(xué)習(xí)系統(tǒng)，學(xué)習(xí)使用element-plus框架動(dòng)態(tài)渲染從后端獲取的數(shù)據(jù)，在這里跟諸位大佬一起分享：

話(huà)不多說(shuō)，上代碼：

    <div class="home_company">
      <el-table
        :data="getHomeShowAllCompany.companyArr"     //使用data屬性動(dòng)態(tài)綁定需要展示的數(shù)組
        height="auto"                                //height屬性自適應(yīng)
        border
        style="width: 100%"
      >
        //labal表示表頭展示的名稱(chēng)  prop屬性與數(shù)組中本列需要展示的數(shù)據(jù)名對(duì)應(yīng)
        <el-table-column label="公司名稱(chēng)" prop="company_name">   
        </el-table-column>  
        <el-table-column label="公司所在地" prop="company_location">
        </el-table-column>
        <el-table-column label="公司官網(wǎng)" prop="website">
//如果你需要對(duì)數(shù)據(jù)進(jìn)行其他的處理，你需要使用插槽scope.row.本行的任意屬性名，即可以獲得對(duì)應(yīng)數(shù)據(jù)
          <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
              //插槽里的數(shù)據(jù)也可以作為參數(shù)進(jìn)行傳遞
              @click="searchInterviewRecode(scope.row.ID)"
              >搜索</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
<script setup>
//引用倉(cāng)庫(kù)獲取公司數(shù)據(jù)
import { homeShowAllCompanyStore } from "@/store/home";
import { showAllRecords } from "~~/api/index";
//將請(qǐng)求到的全部公司的數(shù)組存在getHomeShowAllCompany中
let getHomeShowAllCompany = homeShowAllCompanyStore();
//傳遞的參數(shù)
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>

后端返回?cái)?shù)據(jù)展示：

實(shí)現(xiàn)效果展示：

到此這篇關(guān)于element-plus+Vue3實(shí)現(xiàn)表格數(shù)據(jù)動(dòng)態(tài)渲染的文章就介紹到這了,更多相關(guān)element Vue3表格動(dòng)態(tài)渲染內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: