“我报名参加金石计划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;
     }
    

最后效果

完结!!!! 撒花撒花🌸🌸🌸🌸🌸