vue+element表格的内容和编辑

element-ui引用el-table

1.安装element-ui

npm i element-ui -S

2.全局引用

**在main.js引用** import ElementUi from 'element-ui' import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUi);

3.在.vue文件引用element-ui的表格的代码

<template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }] } } } </script>

效果图：

4.表格全部的单元格居中显示

.el-table .cell { text-align: center; }

效果图：

操作表格的数据

1.添加操作按钮，可以对表格进行编辑和删除

<el-table-column fixed="right" label="操作" width="130"> <template slot-scope="scope"> <el-button v-if="scope.row.isSet" @click="handleEdit(scope.$index, scope.row)" type="text" size="small">编辑</el-button> <el-button v-else @click="saveEdit(scope.$index, scope.row)" type="text" size="small">确定</el-button> <el-button type="text" @click="deleteRow(scope.$index, tableData, scope.row)" size="small">删除</el-button> </template> </el-table-column>

为每一行数据添加一个属性，isSet：true，控制表格的显示状态

2.操作列：默认显示编辑按钮，点击编辑按钮切换isSet的状态，编辑变为确定按钮，

3.编辑，确定，删除的代码

methods: { handleEdit(index, row) { for (const i of this.tableData) { if (!i.isSet) return this.$message.warning('请先保存当前编辑项') } row.isSet = false }, saveEdit(index, row) { row.isSet = true }, deleteRow(index, rows, row) { console.log(row.id) console.log(rows, index) this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }) .then(async () => { rows.splice(index, 1) this.$message({ type: 'success', message: '删除成功!' }) }) .catch(() => { this.$message({ type: 'info', message: '已取消删除' }) }) }, }

4.点击编辑按钮可以对这一行数据进行编辑

点击编辑就是对单元格的span和input的切换，通过改变isSet的状态来实现切换，在el-table-column加上<template slot-scope="scope">这个是模板，就是slot-scope可以获取到这一行的数据，row, column, $index 和 store（table 内部的状态管理）的数据，具体理解可以参考：https://blog.csdn.net/tg928600774/article/details/81945140

将tl-table-column的代码换成下面的形式，能够通过isSet控制span和input

<el-table-column label="地址"> <template slot-scope="scope"> <span v-if="scope.row.isSet">{{scope.row.address}}</span> <span v-else> <el-input v-model="scope.row.address"></el-input> </span> </template> </el-table-column>

点击编辑的按钮，可以编辑这一行，如下图

5.对单个单元格进行编辑

在el-table中添加@cell-click="tabClick" :row-class-name="tableRowClassName"点击事件和将每一行的索引放进row中，用来区分每一行

// el-table <el-table :data="tableData" border style="width: 100%" @cell-click="tabClick" :row-class-name="tableRowClassName"> //el-table-column中重新定义判断条件 <el-table-column label="日期" width="180"> <template slot-scope="scope"> <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '日期'"> <el-input v-model="scope.row.date" @blur="inputBlur(scope)" /> </span> <span v-else>{{ scope.row.date }}</span> </template> </el-table-column> //在methods添加方法 // 把每一行的索引放进row，用来区分每一列，不加无法判断是那一行 tableRowClassName({ row, rowIndex }) { console.log(row, rowIndex) // row.index = rowIndex; }, // 通过点击单元格的时候将每一行的下标和label赋值，用来判断那一行，那一列 tabClick(row, column, cell, event) { console.log(row, column, cell, event); switch (column.label) { case "日期": this.tabClickIndex = row.index; this.tabClickLabel = column.label; break; case "姓名": this.tabClickIndex = row.index; this.tabClickLabel = column.label; break; default: return; } }, inputBlur(scope) { this.tabClickIndex = null; this.tabClickLabel = ""; },

点击单元格，这个单元格出现input输入框

如果没有判断每一行，那点击的时候会出现这一列都出现input输入框 如下

6.删除表格

// 点击删除按钮，获得这一行的index，获取到row(这一行数据)，rows(所有数据)，index(row在rows中的位置)，调用splice删除这行数据 rows.splice(index, 1)

7.添加表格数据，

在表格外面增加一个添加按钮，点击添加的时候，将数据推入给表格,且·如果需要添加一个按钮的时候，需要将el-table和el-button用一个大容器包起来，否则报错，因为在template里面只能有一个最大的标签

addTable() { var _this = this var tableObj = { date: '2016-05-08', name: '王小龙', address: '上海市普陀区金沙江路 1512 弄', isSet: true, } this.tableData.push(tableObj) }