el-table 表格动态绑定验证规则,表头添加必填样式

        开发工作中，我们肯定会遇到这样的需求，使用el-table 的时候需要动态的新增表格行，并且表格行还需要绑定表单验证的需求，所以将总结的方法放在下面。

template 部分

        主要使用el-form 和el-table 搭配使用

<template>
    <div class="spp-user-body spp-theme-body spp-theme-pad">
      <!-- 列表 -->
      <div class="spp-table-group spp-theme-top spp-theme-pad">
        <div class="spp-table-btns">
          <el-button size="small" type="primary" @click="onAdd"><i class="el-icon-plus" />新增 </el-button>
        </div>
        <el-form
          ref="formRef"
          :model="tableForm"
          label-width="120px"
          :inline="true"
          :rules="formRules"
          size="small"
          label-position="center"
        >
          <el-table
            ref="tableRef"
            v-loading="tableLoading"
            class="my-table"
            :data="tableForm.tableData"
            :stripe="true"
            :header-cell-style="headerCellStyle"
            :cell-style="cellStyle"
            border
            style="width: "
          >
              <el-table-column prop="xh" type="index" label="序号" width="120px" />
              <!-- <el-table-column type="selection" width="85px" :key="Math.random()" /> -->
              <el-table-column label="名称" :render-header="addRedStar" min-width="260" >
                <template slot-scope="scope">
                  <el-form-item :prop="`tableData.${scope.$index}.name`" :rules="formRules.name">
                    <el-input v-model="scope.row.name" maxlength="20" placeholder="请输入" clearable />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="部门" :render-header="addRedStar" min-width="260" >
                <template slot-scope="scope">
                  <el-form-item :prop="`tableData.${scope.$index}.date`" :rules="formRules.date">
                    <el-select v-model="scope.row.date" placeholder="请选择" collapse-tags clearable>
                      <el-option v-for="item in deptOptions" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="操作人" :render-header="addRedStar" min-width="260" >
                <template slot-scope="scope">
                  <el-form-item :prop="`tableData.${scope.$index}.address`" :rules="formRules.address">
                    <el-input v-model="scope.row.address" maxlength="10" placeholder="请输入" clearable />
                  </el-form-item>
                </template>
              </el-table-column>
        
              <el-table-column label="操作" width="120px" >
                <template slot-scope="scope">
                  <!-- <el-button size="mini" icon="el-icon-edit-outline" @click="rowEdit(scope.row)" /> -->
                  <el-button size="mini" icon="el-icon-delete" type="danger" @click="rowDelete(scope.$index)" />
                </template>
              </el-table-column>
          </el-table>
        </el-form>
      </div>
    </div>
  </template>

script 部分

        主要是新增和删除方法。

  <script>
  
  export default {
    data() {
      return {
        deptOptions: [],
        tableLoading: false,
        tableForm: {
            tableData: [{
                id:'1',
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            id:'2',
 
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            id:'3',
 
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            id:'1',
 
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        },
        formRules: {
          name: [{ required: true, message: '必填', trigger: 'change' }],
          date: [{ required: true, message: '必填', trigger: 'change' }],
          address: [{ required: true, message: '必填', trigger: 'change' }]
        }
      }
    },
    mounted() {
    },
    methods: {
      // 设置表头样式
      headerCellStyle({ row, column, rowIndex, columnIndex }) {
        return { textAlign: 'center', background: '#f5f5f5' }
      },
      // 设置表内容样式
      cellStyle({ row, column, rowIndex, columnIndex }) {
        return { textAlign: 'center' }
      },
      addRedStar(h, { column }) { // 给表头加必选标识
        return [h('span', { style: 'color: red' }, '*'), h('span', ' ' + column.label)]
      },
      onAdd() {
        this.tableForm.tableData.push(
          {
            name: '',
            date: '',
            address: '',
          }
        )
      },
      rowDelete(index) {
        console.log(index);
        this.tableForm.tableData.splice(index, 1)
      },
    }
  }
  </script>