vue?使用el-table循環(huán)生成表格的過程
更新時(shí)間：2022年04月26日 16:51:15 作者：全糖去冰
這篇文章主要介紹了vue?使用el-table循環(huán)生成表格的過程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
使用el-table循環(huán)生成表格
el-table
vue項(xiàng)目中使用element框架，提供的table組件使用起來過于繁雜，改成配置模式，循環(huán)生成表格！
配置前：
配置后：
動(dòng)態(tài)循環(huán)el-table的列
<template> ? <div class="hello"> ? ? <EncapTable ref="items" :Data="Data"></EncapTable> ? </div> </template>
<script>
import EncapTable from "./EncapTable";
export default {
? name: "HelloWorld",
? components: {
? ? // 注冊(cè)組件
? ? EncapTable
? },
? data() {
? ? return {
? ? ? Data: {
? ? ? ? tableData: [
? ? ? ? ? // 表單數(shù)據(jù)
? ? ? ? ? {
? ? ? ? ? ? date: "2016-05-02",
? ? ? ? ? ? name: "王小虎",
? ? ? ? ? ? address: "上海市普陀區(qū)金沙江路 1518 弄"
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? date: "2016-05-04",
? ? ? ? ? ? name: "王小虎",
? ? ? ? ? ? address: "上海市普陀區(qū)金沙江路 1517 弄"
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? date: "2016-05-01",
? ? ? ? ? ? name: "王小虎",
? ? ? ? ? ? address: "上海市普陀區(qū)金沙江路 1519 弄"
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? date: "2016-05-03",
? ? ? ? ? ? name: "王小虎",
? ? ? ? ? ? address: "上海市普陀區(qū)金沙江路 1516 弄"
? ? ? ? ? }
? ? ? ? ],
? ? ? ? tableTitle: [
? ? ? ? ? // 用于動(dòng)態(tài)循環(huán)表頭
? ? ? ? ? {
? ? ? ? ? ? prop: "date",
? ? ? ? ? ? label: "日期"
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? prop: "name",
? ? ? ? ? ? label: "姓名"
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? prop: "address",
? ? ? ? ? ? label: "地址"
? ? ? ? ? }
? ? ? ? ],
? ? ? ? // 一頁顯示多少條
? ? ? ? pageSize: 10,
? ? ? ? // 是否顯示編輯和刪除
? ? ? ? showEditAndDelete: true
? ? ? }
? ? };
? },
? mounted() {}
};
</script>
<style scoped></style>以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
provide和inject主要為高階插件/組件庫提供用例,并不推薦直接用于應(yīng)用程序代碼中,下面這篇文章主要給大家介紹了關(guān)于Vue中provide、inject詳解以及使用的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Vue3異步組件Suspense的使用方法詳解,需要的朋友可以參考下2023-01-01
vue2.0 + ele的循環(huán)表單及驗(yàn)證字段方法
今天小編就為大家分享一篇vue2.0 + ele的循環(huán)表單及驗(yàn)證字段方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
一文詳細(xì)聊聊vue3的defineProps、defineEmits和defineExpose
vue3官方文檔defineProps和defineEmits都是只能在scriptsetup中使用的編譯器宏,下面這篇文章主要給大家介紹了關(guān)于vue3的defineProps、defineEmits和defineExpose的相關(guān)資料,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue3使用ref的性能警告問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
詳解vue3結(jié)合ts項(xiàng)目中使用mockjs
這篇文章主要為大家介紹了vue3結(jié)合ts項(xiàng)目中使用mockjs示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章給大家介紹了vue3中form對(duì)象無法賦值的問題解決,有時(shí)候?qū)ο蟮闹邓阑钯x不上值,這時(shí)候可以看下賦值的對(duì)象變量名是否和頁面組件中的ref相同,文中給出了代碼示例供大家參考,需要的朋友可以參考下2024-01-01
Vue動(dòng)態(tài)路由緩存不相互影響的解決辦法
這篇文章主要介紹了Vue動(dòng)態(tài)路由緩存不相互影響的解決辦法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
這篇文章主要介紹了vue 使用monaco實(shí)現(xiàn)代碼高亮的方法，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
解決vue的過渡動(dòng)畫無法正常實(shí)現(xiàn)問題
今天小編就為大家分享一篇解決vue的過渡動(dòng)畫無法正常實(shí)現(xiàn)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10