vue+element-ui实现行数可控的表格输入

番茄西红柿发布于2019-04-23 11:47 / 3589人阅读

摘要：的中使用包裹想要插入的，或者等元素，绑定一个的数组对象，在或者等元素使用，为该在绑定数组对象的对应属性这样就可以实现每一行的数据分别存储在绑定数组对象的不同下标数组中。新增一列时，只需要让绑定数组对象一个与先前属性一致的空对象进去。

element的table中使用

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

包裹想要插入的input，或者select等HTML元素，绑定一个的数组对象，在input或者select等HTML元素使用 v-model="scope.row.graduationSchool"，graduationSchool为该HTML在table绑定数组对象的对应属性；这样就可以实现每一行的数据分别存储在table绑定数组对象的不同下标数组中。

新增一列时，只需要让table绑定数组对象push()一个与先前属性一致的空对象进去。

this.educationExperience.push({
        // 毕业时间
        graduationTime: ,
        // 毕业院校
        graduationSchool: ,
        // 专业
        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="毕业时间">
        <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="毕业院校">
        <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="专业">
        <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

实现效果：

私有云服务器托管 js获取表格行数可控的线程中断 VUE实现webrtc Vue实现分页

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1152.html

vue封装element-ui的table组件,灵活配置表头实现表格内编辑，按钮，链接等功能。

摘要：一封装的组件定义表格高度全屏增加前台分页功能。表格内编辑后，自动选中该行。单元格内数据样式单元格内按钮，可多个。触发组件绑定函数，参数按钮名称，按钮样式，按钮事件标识。单元格是否可点击的判断函数，可进行复杂的函数判断。 vue-bxz-table 一、封装element-ui的table组件：定义表格高度全屏增加前台分页功能。自定义表头，循环输出整体表结构。表格内编辑（输入框...

henry14 2019-08-26 13:30 评论0 收藏0
手摸手，带你用vue撸后台系列三(实战篇)

摘要：社区的认可目前已经是相关最多的开源项目了，体现出了社区对其的认可。监听事件手动维护列表这样我们就简单的完成了拖拽排序。完整项目地址：vue-element-admin 系类文章一：手摸手，带你用vue撸后台系列一(基础篇)系类文章二：手摸手，带你用vue撸后台系列二(登录权限篇)系类文章三：手摸手，带你用vue撸后台系列三(实战篇）系类文章四：手摸手，带你用vue撸后台系列...

Channe 2019-08-20 17:15 评论0 收藏0
手摸手，带你用vue撸后台系列三(实战篇)

摘要：社区的认可目前已经是相关最多的开源项目了，体现出了社区对其的认可。监听事件手动维护列表这样我们就简单的完成了拖拽排序。完整项目地址：vue-element-admin 系类文章一：手摸手，带你用vue撸后台系列一(基础篇)系类文章二：手摸手，带你用vue撸后台系列二(登录权限篇)系类文章三：手摸手，带你用vue撸后台系列三(实战篇）系类文章四：手摸手，带你用vue撸后台系列...

zgbgx 2019-08-29 12:46 评论0 收藏0
D2 Crud，一款简单易用的表格组件

摘要：是一套基于和的表格组件。将的功能进行了封装，并增加了表格的增删改查数据校验表格内编辑等常用的功能。大部分功能可由配置实现，在实现并扩展了表格组件功能的同时，降低了开发难度，减少了代码量，大大简化了开发流程。 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 手写权限管理系统后台模板（一）——简述

摘要：简介最近写了一个基于权限管理系统的后台模板，包含了正常项目开发所需的框架功能，开发者使用的时候只需要专注于项目的业务逻辑就好。同时接下来会让你拥有一个自己完全掌控的框架。简介最近写了一个基于vue2.0+element-ui权限管理系统的后台模板，包含了正常项目开发所需的框架功能，开发者使用的时候只需要专注于项目的业务逻辑就好。同时接下来会让你拥有一个自己完全掌控的框架。源码地址...

_ivan 2019-08-23 14:06 评论0 收藏0