vue+element-ui 实现可编辑表格
2022-01-12 15:57:38 更新 浏览量: 4992
| 本章 | 下一章：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>
陕公网安备 61012402000223号