vue+element-ui實現(xiàn)行數(shù)可控的表格輸入

番茄西紅柿發(fā)布于2019-04-23 11:47 / 3783人閱讀

摘要：的中使用包裹想要插入的，或者等元素，綁定一個的數(shù)組對象，在或者等元素使用，為該在綁定數(shù)組對象的對應屬性這樣就可以實現(xiàn)每一行的數(shù)據(jù)分別存儲在綁定數(shù)組對象的不同下標數(shù)組中。新增一列時，只需要讓綁定數(shù)組對象一個與先前屬性一致的空對象進去。

element的table中使用

<template slot-scope="scope">
template>

包裹想要插入的input，或者select等HTML元素，綁定一個的數(shù)組對象，在input或者select等HTML元素使用 v-model="scope.row.graduationSchool"，graduationSchool為該HTML在table綁定數(shù)組對象的對應屬性；這樣就可以實現(xiàn)每一行的數(shù)據(jù)分別存儲在table綁定數(shù)組對象的不同下標數(shù)組中。

新增一列時，只需要讓table綁定數(shù)組對象push()一個與先前屬性一致的空對象進去。

this.educationExperience.push({
        // 畢業(yè)時間
        graduationTime: ,
        // 畢業(yè)院校
        graduationSchool: ,
        // 專業(yè)
        major: ,
        // 學歷
        degree: ,
        // 學歷性質
        degreeNature: ,
        // 學歷編號
        degreeNumber: ,
        // 是否顯示新增按鈕
        show: true,
      });

完整代碼：

<template>
<div class="test">
  <el-card class="educationExperienceTable">
    <span class="cardHeader">教育經歷span>

    <el-table :data="educationExperience"
              stripe
              border>
      <el-table-column label="畢業(yè)時間">
        <template slot-scope="scope">
          <div class="educationExperienceDiv">
            <el-date-picker v-model="scope.row.graduationTime"
                            placeholder=""
                            type="date"
                            value-format="yyyy-MM-dd">
            el-date-picker>
          div>
        template>
      el-table-column>
      <el-table-column label="畢業(yè)院校">
        <template slot-scope="scope">
          <div class="educationExperienceDiv">
            <el-input v-model="scope.row.graduationSchool"
                      placeholder="">
            el-input>
          div>
        template>
      el-table-column>
      <el-table-column label="專業(yè)">
        <template slot-scope="scope">
          <div class="educationExperienceDiv">
            <el-input v-model="scope.row.major"
                      placeholder="">
            el-input>
          div>
        template>
      el-table-column>
      <el-table-column label="學歷">
        <template slot-scope="scope">
          <div class="educationExperienceDiv">
            <el-select v-model="scope.row.degree"
                        placeholder=""
                        clearable>
              <el-option v-for="(item, index) in degreeList"
                          :key="index"
                          :label="item.label"
                          :value="item.value">
              el-option>
            el-select>
          div>
        template>
      el-table-column>
      <el-table-column label="學歷性質">
        <template slot-scope="scope">
          <div class="educationExperienceDiv">
            <el-select v-model="scope.row.degreeNature"
                        placeholder=""
                        clearable>
              <el-option v-for="(item, index) in degreeNatureList"
                          :key="index"
                          :label="item.label"
                          :value="item.value">
              el-option>
            el-select>
          div>
        template>
      el-table-column>
      <el-table-column label="學歷編號">
        <template slot-scope="scope">
          <div class="educationExperienceDiv">
            <el-input v-model="scope.row.degreeNumber"
                      placeholder="">
            el-input>
          div>
        template>
      el-table-column>
      <el-table-column label="操作"
                        width="136px">
        <template slot-scope="scope">
            <el-button type="success"
                        size="mini"
                        icon="el-icon-circle-plus-outline"
                        v-if="scope.row.show === true"
                        plain
                        @click="pushNewEducation(scope.$index)">
            el-button>
            <el-button type="danger"
                        size="mini"
                        icon="el-icon-delete"
                        plain
                        @click="deleteEducation(scope.$index)">
            el-button>
        template>
      el-table-column>
    el-table>
  el-card>
div>
template>

HTML

CSS

實現(xiàn)效果：

云服務器 GPU云服務器 js獲取表格行數(shù) 可控的線程中斷 VUE實現(xiàn)webrtc Vue實現(xiàn)分頁

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/1152.html

vue封裝element-ui的table組件,靈活配置表頭實現(xiàn)表格內編輯，按鈕，鏈接等功能。

摘要：一封裝的組件定義表格高度全屏增加前臺分頁功能。表格內編輯后，自動選中該行。單元格內數(shù)據(jù)樣式單元格內按鈕，可多個。觸發(fā)組件綁定函數(shù)，參數(shù)按鈕名稱，按鈕樣式，按鈕事件標識。單元格是否可點擊的判斷函數(shù)，可進行復雜的函數(shù)判斷。 vue-bxz-table 一、封裝element-ui的table組件：定義表格高度全屏增加前臺分頁功能。自定義表頭，循環(huán)輸出整體表結構。表格內編輯（輸入框...

henry14 2019-08-26 13:30 評論0 收藏0
手摸手，帶你用vue擼后臺系列三(實戰(zhàn)篇)

摘要：社區(qū)的認可目前已經是相關最多的開源項目了，體現(xiàn)出了社區(qū)對其的認可。監(jiān)聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。完整項目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺系列一(基礎篇)系類文章二：手摸手，帶你用vue擼后臺系列二(登錄權限篇)系類文章三：手摸手，帶你用vue擼后臺系列三(實戰(zhàn)篇）系類文章四：手摸手，帶你用vue擼后臺系列...

Channe 2019-08-20 17:15 評論0 收藏0
手摸手，帶你用vue擼后臺系列三(實戰(zhàn)篇)

摘要：社區(qū)的認可目前已經是相關最多的開源項目了，體現(xiàn)出了社區(qū)對其的認可。監(jiān)聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。完整項目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺系列一(基礎篇)系類文章二：手摸手，帶你用vue擼后臺系列二(登錄權限篇)系類文章三：手摸手，帶你用vue擼后臺系列三(實戰(zhàn)篇）系類文章四：手摸手，帶你用vue擼后臺系列...

zgbgx 2019-08-29 12:46 評論0 收藏0
D2 Crud，一款簡單易用的表格組件

摘要：是一套基于和的表格組件。將的功能進行了封裝，并增加了表格的增刪改查數(shù)據(jù)校驗表格內編輯等常用的功能。大部分功能可由配置實現(xiàn)，在實現(xiàn)并擴展了表格組件功能的同時，降低了開發(fā)難度，減少了代碼量，大大簡化了開發(fā)流程。 D2-Crud 是一套基于Vue.js 2.2.0+ 和 Element UI 2.0.0+ 的表格組件。D2-Crud 將 Element 的功能進行了封裝，并增加了表格的增刪改...

fevin 2019-08-23 11:43 評論0 收藏0
Vue2.0 + ElementUI 手寫權限管理系統(tǒng)后臺模板（一）——簡述

摘要：簡介最近寫了一個基于權限管理系統(tǒng)的后臺模板，包含了正常項目開發(fā)所需的框架功能，開發(fā)者使用的時候只需要專注于項目的業(yè)務邏輯就好。同時接下來會讓你擁有一個自己完全掌控的框架。簡介最近寫了一個基于vue2.0+element-ui權限管理系統(tǒng)的后臺模板，包含了正常項目開發(fā)所需的框架功能，開發(fā)者使用的時候只需要專注于項目的業(yè)務邏輯就好。同時接下來會讓你擁有一個自己完全掌控的框架。源碼地址...

_ivan 2019-08-23 14:06 評論0 收藏0