vue实战

vue+element-ui 实现可编辑表格

2022-01-12 15:57:38 更新   浏览量: 953
本章 下一章:vue仿dos命令界面

vue+element-ui 实现可编辑表格、动态渲染表头和表格数据、列向数据合计(每行末尾合计功能)

1、首先得在项目中集成element-ui 安装,注册,具体参照 element-ui
2、我这里使用的vue-cli脚手架搭建的项目,可网上搜索相关知识
3、我的需求,做一个比赛项目打分表,评委可以实现在线打分,表头和表格数据首先都是动态获取后台数据进行渲染,这里我先写成假数据以供大家参考
4、HTML部分代码

实例

<template>
<div>
<el-container>
<el-header>Header</el-header>
<el-main>
<div>
// 表格数据在这里: :data="tableData"
<el-table
border
:data="tableData"
class="tb-edit"
style="width: 100%"
highlight-current-row
@row-click="handleCurrentChange"
>
<el-table-column label="项目名称">
<template scope="scope">
<span>{{ scope.row.item }}</span>
</template>
</el-table-column>

// 动态循环表头数据
<el-table-column :label="item.val" v-for="(item,index) in tableHead" :key="index">
<template scope="scope">
<el-input
size="small"
v-model="scope.row[item.item]"
placeholder="0"
type="number"
@change="handleEdit(scope.$index, scope.row,item.item)"
></el-input>
<span>{{ scope.row[item.item] }}</span>
</template>
</el-table-column>

<el-table-column label="总分" prop="total">

</el-table-column>
</el-table>
</div>
</el-main>
<el-footer> <el-button type="primary">提交</el-button></el-footer>
</el-container>
</div>
</template>

运行预览 »


扫二微码
本章 下一章:vue仿dos命令界面

最近更新 免责声明 关于我们

Copyright © 2004-2021 前端教程 qianduan.cn All Rights Reserved   陕ICP备2021014585号-1 陕公网安备 61012402000223号 前端教程

友情链接:  前端工具 前端插件 前端小川