“我报名参加金石方案1期应战——瓜分10万奖池，这是我的第1篇文章，点击查看活动详情”

1、新增表格行

事务场景: 表格行可供用户自定义增加

<template>
 <el-table
      :data="tableData"
      style="width: 100%"
      border
    >
    <!-- :row-style="rowStyle" -->
    <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="120">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        width="240">
      </el-table-column>
      <el-table-column
        prop="sex"
        label="性别"
        width="120">
      </el-table-column>
      <el-table-column
        prop="age"
        label="年龄"
        width="120">
      </el-table-column>
    </el-table>
    </template>
    <script>
    export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小狗",
          address: "上海市普陀区金沙江路 1518 弄",
          sex: "女",
          age: null,
        },
        {
          date: "2016-05-04",
          name: "王小猫",
          address: "上海市普陀区金沙江路 1517 弄",
          sex: null,
          age: "29",
        },
        {
          date: "2016-05-01",
          name: "王小猪",
          address: "上海市普陀区金沙江路 1519 弄",
          sex: "女",
          age: "12",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          sex: "男",
          age: null,
        },
      ],
      aa: {
        name: "刘傲波",
        age: "18",
        gender: "男",
      },
    };
  },
  computed: {
    data() {
      return this.tableData.map((item) => Object.values(item));
    },
  },
  methods: {
    addRow() {
      this.tableData.push({
        date: "",
        name: "",
        address: " ",
        sex: "",
        age: "",
      });
    },
    }
    </script>

这这儿我是给按钮增加了点击事情给tableDatapush进一个空数组,但也带来了一些问题:

• 因为新参加进来的数据是空,因而他们的高度无法被撑开

问题解决:给每一行的表格设置一致的高度

    <el-table
      :data="tableData"
      style="width: 100%"
      border
      :row-style="rowStyle"
    >
   // 新增函数,将高度一致设置为60px
    rowStyle({ row }) {
      let stylejson = {};
      if (row) {
        stylejson.height = "80px";
        return stylejson;
      }
    },

2、自定义单元格款式

事务场景:当咱们需求根据后端回来的数据给某个(某些)单元格做一些特定的符号时(比如上面的table表格,有些数据是空,就给为空的单元格加个红色边框符号一下 )

    <el-table
      :data="tableData"
      style="width: 100%"
      border
      :row-style="rowStyle"
      :cell-style="cellStyle"
    >
    # 新增函数,遍历数组判别每个属性是否为空
   cellStyle({ row, column, rowIndex, columnIndex }) {
     const data = this.tableData.map((item) => Object.values(item));
    if(!data[rowIndex][columnIndex]) return "border: 2px solid red "
    },

3、将每个单元格做成可修改的状态

事务场景:将表格设置为可修改的表格便于用户修改数据

1. 首要咱们给单元格增加点击单元格触发的事情,并获取相应的dom
2. 然后在事情中对input和span进行增加款式或删去款式
3. 最终给单元表格增加失去焦点的事情,并对input和span进行增加款式或删去款式

<template>
<el-table
      :data="tableData"
      style="width: 100%"
      border
      :row-style="rowStyle"
      :cell-style="cellStyle"
      @cell-dblclick="changeInput"
      @cell-mouse-leave="leaveTable"
    >
    <el-table-column label="日期" width="140">
        <template slot-scope="scope" >
          <div class="none">
            <el-input  type="text" v-model="scope.row.date"  />
          </div>
          <span v-show="!scope.row.iseditor">{{scope.row.date}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="120">
        <template slot-scope="scope">
          <div class="none">
            <el-input  type="text" v-model="scope.row.name"  />
          </div>
          <span v-show="!scope.row.iseditor">{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column label="地址" width="260">
        <template slot-scope="scope">
          <div class="none">
            <el-input  type="text" v-model="scope.row.address"  />
          </div>
          <span v-show="!scope.row.iseditor">{{scope.row.address}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="sex" label="性别" width="120">
        <template slot-scope="scope">
          <div class="none">
            <el-input  type="text" v-model="scope.row.sex"  />
          </div>
          <span v-show="!scope.row.iseditor">{{scope.row.sex}}</span>
        </template>
      </el-table-column>
      <el-table-column label="年龄" width="120">
        <template slot-scope="scope">
          <div class="none">
            <el-input  type="text" v-model="scope.row.age"  />
          </div>
          <span v-show="!scope.row.iseditor">{{scope.row.age}}</span>
        </template>
      </el-table-column>
    </el-table>
    </template>
    # 增加事情函数
   changeInput(row, column, cell, event){
      cell.children[0].children[0].classList.remove('none')
      cell.children[0].children[1].classList.add('none')
    },
   leaveTable(row, column, cell, event){
    cell.children[0].children[0].classList.add('none')
      cell.children[0].children[1].classList.remove('none')
   },
    # 增加style款式
    .none{
       display:none;
     }
    .block{
       display:block;
     }

最终效果

结束!!!! 撒花撒花