序言

因为公司需要开发一套内部用的管理系统，又没有前端，只能我自己顶上了，百度得来的资料太过繁杂，讲的也不细，在此记录下自己边学边做的东西。为了节约开发时间，我的项目使用的是花裤衩大佬的vue-admin-template

可编辑表格

表格编辑应该是比较常用的功能吧，但是搜了一圈大家都讲的挺简略的，可能真正的开发用封装好的插件比较多吧，以下是我查资历整合来的成果，部分代码如下：

<el-form :model="tableForm" ref="tableForm">
          <el-table
            :data="tableForm.tableData"
            :highlight-current-row='true'
            :header-cell-style="headStyle"
            :cell-style="cellStyle"
            :border="true"
            max-height="850"
            style="width: 100%"
            class="lineSection">
            <el-table-column fixed prop="line" label="Line" min-width="55px">
              <template slot-scope="scope">
                {{scope.$index + 1}}
              </template>
            </el-table-column>
            <el-table-column prop="brand" label="Brand" min-width="100px">
            </el-table-column>
            <el-table-column prop="monthlyqty" label="Monthly|Quantity" :render-header="renderheader" min-width="100px">
              <template slot-scope="scope">
                <el-form-item :prop="`tableData.${scope.$index}.monthlyqty`"  :rules="tableRules.monthlyqty">
                  <el-input v-show="scope.row.show" v-model="scope.row.monthlyqty"></el-input>
                  <span v-show="!scope.row.show">{{scope.row.monthlyqty}}</span>
                </el-form-item>
              </template>
            </el-table-column>
	</el-table>
</el-form>

现阶段的表格差不多就这样吧，说说这里面做了什么 因为elementui官方提供的诸如文本框、下拉框之类的组件，皆为form-item，所以需要在table外层需要包一个form。 当然你可以不包form，如果你不需要对table中的数据做前端校验的话。 这里嵌入了scope，是为了使table处于非编辑状态的时候，作为纯表格展示，而不显示编辑框 大致效果如图： 当需要获取指定单元格的value时

this.tableForm.tableData[index].brand

表格中单元格编辑框切换

各位可以看到，在Part Number一列中，有一个切换按钮，是用于切换Part Number和Series的，在v-if和v-show中犹豫了很久，最终决定使用v-show

<el-table-column prop="pn" label="Part Number / Series" min-width="390px">
              <template slot-scope="scope">
                <el-form-item :prop="`tableData.${scope.$index}.pn`"  :rules="tableRules.pn">
                  <label v-show="tableForm.tableData[scope.$index].pnType === 'pn'" style="margin-right: 5px;">P:</label>
                  <el-select style="width: 80%;" placeholder="" v-show="scope.row.show && tableForm.tableData[scope.$index].pnType === 'pn'"
                  v-model="scope.row.pn" filterable @change="autofillbrand($event, scope.$index)">
                    <el-option v-for="item in displayOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                  <label v-show="tableForm.tableData[scope.$index].pnType === 'series'" style="margin-right: 5px;">S:</label>
                  <el-select style="width: 80%;" placeholder="" v-show="scope.row.show && tableForm.tableData[scope.$index].pnType === 'series'" v-model="scope.row.series" filterable>
                  </el-select>
                  <el-button class="pnswitchbtn" size="medium" icon="el-icon-refresh" style="margin-left: 5px;" @click="switchpns(scope.$index)" circle></el-button>
                  <span v-show="!scope.row.show">{{scope.row.pn}}</span>
                </el-form-item>
              </template>
            </el-table-column>

js部分：
switchpns(index){
      console.log(this.tableForm.tableData)
      if(this.tableForm.tableData[index].pnType === 'pn'){
        this.tableForm.tableData[index].pnType = 'series'
        this.tableForm.tableData[index].brand = ''
        this.tableForm.tableData[index].pn = ''
      }else{
        this.tableForm.tableData[index].pnType = 'pn'
        this.tableForm.tableData[index].brand = ''
        this.tableForm.tableData[index].series = ''
      }
    }

原理很简单，设定一个额外的type值去确定指定即可，需要注意的是，必须确切指定到是当前行的type，否则点击按钮会影响到所有行。

根据其中一个单元格的内容，自动填充另一个单元格

autofillbrand(value, index){
      let obj={}
      obj = this.displayOptions.find((item)=>{
        return item.value === value;
      });
      let getName = ''
      let brandtmp = ''
      getName = obj.label
      for (let i = 0; i < getName.length; i++) {
	this.tableForm.tableData[index].brand = brandtmp
        ...
      }
    },

以上的displayOptions是Part Number的数据，通过填入的数据，找到对应的object，然后再去获取value，如果你的数据value和label一致，其实不用这么麻烦orz，我是需要对label值做一些规则校验，再回怼到brand里面。

样式穿透

这个应该是为了避免样式污染，如

.lineSection /deep/ .pnswitchbtn { color: #FF8C00; }

lineSection是table的class， /deep/为穿透用法，看官方文档有三种写法，但我的程序中不知为何只有这个能生效