具体属性方法参考官方网站:http://element-cn.eleme.io/#/zh-CN/component/installation

<template>
<div class="table_box">
<div class="btn" style="text-align: left;">
<el-button type="primary" @click="addItem">新增</el-button>
</div>
<el-table :data="list" border :summary-method="getSummaries" show-summary style="width: 100%;" stripe height="260">
<el-table-column label="序号" width="80px" align='center'>
<template slot-scope="scope">
<span>{{ scope.$index +1 }}</span>
</template>
</el-table-column>
<el-table-column label="最喜欢吃" align='center'>
<template slot-scope="scope">
<span v-if="!scope.row.isEgdit">{{['橙子','橘子','榴莲'][scope.row.fruitSort-1]}}</span>
<el-select placeholder="请选择" v-if="scope.row.isEgdit" v-model="scope.row.fruitSort">
<el-option v-for="(item, index) in ['橙子','橘子','榴莲']" :key="index+1" :label="item" :value="index+1">
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column prop="firstNum" label="第一周吃的数量" align='center'>
<template slot-scope="scope">
<span v-if="!scope.row.isEgdit">{{scope.row.firstNum}}</span>
<el-input v-if="scope.row.isEgdit" v-model="scope.row.firstNum"></el-input>
</template>
</el-table-column>
<el-table-column prop="secondNum" label="第二周吃的数量" align='center'>
<template slot-scope="scope">
<span v-if="!scope.row.isEgdit">{{scope.row.secondNum}}</span>
<el-input v-if="scope.row.isEgdit" v-model="scope.row.secondNum"></el-input>
</template>
</el-table-column>
<el-table-column prop="thirdNum" label="第三周吃的数量" align='center'>
<template slot-scope="scope">
<span v-if="!scope.row.isEgdit">{{scope.row.thirdNum}}</span>
<el-input v-if="scope.row.isEgdit" v-model="scope.row.thirdNum"></el-input>
</template>
</el-table-column>
<el-table-column prop="fourthNum" label="第四周吃的数量" align='center'>
<template slot-scope="scope">
<span v-if="!scope.row.isEgdit">{{scope.row.fourthNum}}</span>
<el-input v-if="scope.row.isEgdit" v-model="scope.row.fourthNum"></el-input>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" align='center'>
<template slot-scope="scope">
<el-button v-if="!scope.row.isEgdit" type="primary" size="small" @click='edit(scope.$index,scope.row)' icon="el-icon-edit" circle></el-button>
<el-button v-if="scope.row.isEgdit" type="success" size="small" @click='editSuccess(scope.$index,scope.row)' icon="el-icon-check" circle></el-button>
<el-button @click.native.prevent="deleteItem(scope.$index, list)" type="danger" size="small" icon="el-icon-delete" circle></el-button>
</template>
</el-table-column>
</el-table>
<div style="margin-top: 30px;">
<el-button type="primary" @click="goNextPage">跳转页面</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: [{
id: 1,
fruitSort: 1,
firstNum: 10,
secondNum: 3,
thirdNum: 4,
fourthNum: 6,
}, {
id: 2,
fruitSort: 2,
firstNum: 7,
secondNum: 6,
thirdNum: 8,
fourthNum: 2,
}, {
id: 3,
fruitSort: 3,
firstNum: 5,
secondNum: 6,
thirdNum: 8,
fourthNum: 9,
}, {
id: 4,
fruitSort: 3,
firstNum: 10,
secondNum: 3,
thirdNum: 4,
fourthNum: 6,
}],
}
},
methods: {
//合计 表格每一列需要带上prop
getSummaries(param) {
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '总数量';
return;
}
const values = data.map(item => Number(item[column.property]));
if (!values.every(value => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
sums[index] += '(个)';
} else {
sums[index] = '';
}
}); return sums;
},
//新增数据
addItem() {
let item = {
id: null,
fruitSort: null,
firstNum: null,
secondNum: null,
thirdNum: null,
fourthNum: null,
isEgdit: true
}
this.list.push(item)
},
//删除数据
deleteItem(index, list) {
list.splice(index, 1);
},
//编辑数据
edit(index, row) {
this.$set(row, 'isEgdit', true)
},
//编辑成功
editSuccess(index, row) {
this.$set(row, 'isEgdit', false)
},
//跳转下一页面
goNextPage() {
this.$router.push({ name: 'echartTest' })
}
} } </script>

vue+element ui项目总结点(六)table编辑当前行、删除当前行、新增、合计操作的更多相关文章

  1. vue+element ui项目总结点(二)table合计栏目,按照起始年份--截止年份 插入数据并向后追加数据以最后一条年份+1

    1.oninput 事件在用户输入时触发; <template> <div class="test_box"> <p>hell,你好</p ...

  2. vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式

    不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...

  3. vue+element ui项目总结点(三)富文本编辑器 vue-wangeditor

    1.参考 https://www.npmjs.com/package/vue-wangeditor 使用该富文本编辑器 <template> <div class="egi ...

  4. vue+element ui项目总结点(四)零散细节概念巩固如vue父组件调用子组件的方法、拷贝数据、数组置空问题 等

    vue config下面的index.js配置host: '0.0.0.0',共享ip (假设你的电脑启动了这个服务我电脑一样可以启动)-------------------------------- ...

  5. vue+element ui项目总结点(五)Carousel 走马灯组件、Collapse 折叠面板、Tree 树形控件

    <template> <div class="ele_test_box"> <!-- 常用效果 Popover 弹出框组件 具体属性查看官方文档--& ...

  6. Vue + Element UI项目初始化

    1.安装相关组件 1.1安装Node 检查本地是否安装node node -v 如果没有安装,从Node官网下载 1.2安装npm npm -v 如果没有安装:使用该指令安装: npm install ...

  7. vue+element ui 的tab 动态增减,切换时提示用户是否切换

    前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui  有一个 bug,这里记录一下如何实现.转载 ...

  8. Vue+element ui table 导出到excel

    需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...

  9. 基于 vue+element ui 的cdn网站(多页面,都是各种demo)

    前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...

随机推荐

  1. Firebug的安装与使用

    第一步,点击 Firefox 浏览器上的“工具”选项,然后点击“附加软件”,在弹出的小窗口中,点击右下角的“获取扩展”选项,如图 4 所示. 图 4. 获取扩展 第二步,在点击“获取扩展”选项后,打开 ...

  2. 二级ul li元素动态加载click事件

    一.代码 html代码: <ul class="id1" id="id1" style="width:84%; height:75%;overf ...

  3. SPOJ CIRU The area of the union of circles (计算几何)

    题意:求 m 个圆的并的面积. 析:就是一个板子题,还有要注意圆的半径为0的情况. 代码如下: #pragma comment(linker, "/STACK:1024000000,1024 ...

  4. CCF 201604-1 折点计数 (水题,暴力)

    问题描述 给定n个整数表示一个商店连续n天的销售量.如果某天之前销售量在增长,而后一天销售量减少,则称这一天为折点,反过来如果之前销售量减少而后一天销售量增长,也称这一天为折点.其他的天都不是折点.如 ...

  5. CodeForces 628B New Skateboard 思维

    B. New Skateboard time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  6. E20190214-mt

    roughly  adv. 粗略地; 大致上; 大体上; 粗暴地; equivalent adj. 相等的,相当的,等效的; 等价的,等积的; [化学] 当量的; consult  vi. 咨询; 商 ...

  7. HDU5997 【线段树】

    思路: 用vector存一下各种颜色的区间,每次处理颜色的区间,相同颜色不需要更新.区间最多1e6个没错,但是随着颜色的更替区间只会越来越少. 维护区间左右两端的颜色,lazy一下. 区间合并的时候 ...

  8. Unity3d的批渲染 batch rendering

    http://blog.csdn.net/leonwei/article/details/41942157 批渲染(Batch) batch render 是大部分引擎提高渲染效率的方法,基本原理就是 ...

  9. UIWebView 使用

    UIWebView是iOS sdk中一个最常用的控件.是内置的浏览器控件,我们可以用它来浏览网页.打开文档等等.这篇文章我将使用这个控件,做一个简易的浏览器.如下图: 我们创建一个Window-bas ...

  10. 第二十篇 .NET高级技术之C#中的线程(二) 线程同步基础

    1.同步要领 下面的表格列展了.NET对协调或同步线程动作的可用的工具:                       简易阻止方法 构成 目的 Sleep 阻止给定的时间周期 Join 等待另一个线程 ...