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)
			}