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