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

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

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

element的table中使用

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

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

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

this.educationExperience.push({
        // 畢業(yè)時(shí)間
        graduationTime: ,
        // 畢業(yè)院校
        graduationSchool: ,
        // 專(zhuān)業(yè)
        major: ,
        // 學(xué)歷
        degree: ,
        // 學(xué)歷性質(zhì)
        degreeNature: ,
        // 學(xué)歷編號(hào)
        degreeNumber: ,
        // 是否顯示新增按鈕
        show: true,
      });

完整代碼：

<template>
<div class="test">
  <el-card class="educationExperienceTable">
    <span class="cardHeader">教育經(jīng)歷span>

    <el-table :data="educationExperience"
              stripe
              border>
      <el-table-column label="畢業(yè)時(shí)間">
        <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="專(zhuān)業(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="學(xué)歷">
        <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="學(xué)歷性質(zhì)">
        <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="學(xué)歷編號(hào)">
        <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>