vue?使用el-table循環(huán)生成表格的過程

更新時(shí)間：2022年04月26日 16:51:15 作者：全糖去冰

這篇文章主要介紹了vue?使用el-table循環(huán)生成表格的過程，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

使用el-table循環(huán)生成表格

el-table

vue項(xiàng)目中使用element框架，提供的table組件使用起來過于繁雜，改成配置模式，循環(huán)生成表格！

配置前：

配置后：

動態(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: {
? ? // 注冊組件
? ? 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: [
? ? ? ? ? // 用于動態(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)文章

Vue el-table組件如何實(shí)現(xiàn)將日期格式化
這篇文章主要介紹了Vue el-table組件如何實(shí)現(xiàn)將日期格式化問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
webpack4+express+mongodb+vue實(shí)現(xiàn)增刪改查的示例
這篇文章主要介紹了webpack4+express+mongodb+vue 實(shí)現(xiàn)增刪改查的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-11-11
vue-cli3.0配置及使用注意事項(xiàng)詳解
這次給大家?guī)韛ue-cli3.0配置詳解，使用vue-cli3.0配置的注意事項(xiàng)有哪些？本文通過實(shí)戰(zhàn)案例給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2018-09-09
使用mint-ui實(shí)現(xiàn)省市區(qū)三級聯(lián)動效果的示例代碼
下面小編就為大家分享一篇使用mint-ui實(shí)現(xiàn)省市區(qū)三級聯(lián)動效果的示例代碼，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
Vue3+Vite中不支持require的方式引入本地圖片的解決方案
這篇文章主要介紹了Vue3+Vite中不支持require的方式引入本地圖片的解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-01-01
antd vue表格可編輯單元格以及求和實(shí)現(xiàn)方式
這篇文章主要介紹了antd vue表格可編輯單元格以及求和實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
詳解mpvue scroll-view自動回彈bug解決方案
設(shè)置了scroll-top的scroll-view組件，在組件所在vue實(shí)例data發(fā)生改變時(shí)會自動回彈到最上方，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2018-10-10
關(guān)于Vue中的watch監(jiān)視屬性
這篇文章主要介紹了關(guān)于Vue中的watch監(jiān)視屬性,Vue中的watch默認(rèn)不監(jiān)視對象內(nèi)部值的改變,當(dāng)被監(jiān)視的屬性變化時(shí)，回調(diào)函數(shù)自動調(diào)用，進(jìn)行相關(guān)操作,需要的朋友可以參考下
2023-04-04
vue backtop組件的實(shí)現(xiàn)完整代碼
這篇文章主要介紹了vue backtop組件的實(shí)現(xiàn)完整代碼,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-04-04
vue3中獲取dom元素和操作實(shí)現(xiàn)方法
ref是Vue3中一個(gè)非常重要的功能,它可以用來獲取DOM節(jié)點(diǎn),從而實(shí)現(xiàn)對DOM節(jié)點(diǎn)的操作,下面這篇文章主要給大家介紹了關(guān)于vue3中獲取dom元素和操作實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下
2023-06-06