可编辑原生表格

效果图：

 

<table></table> ：
  style="tborder-color:#ccc;"           //边框颜色
  style="tborder-collapse:collapse;"    //表示边框合并在一起
  style="tborder-collapse:separate;"    //表示边框之间的间距
  style="tborder-spacing: px;"          //边框之间间距的大小
  style="table-layout: fixed;"          //单元格宽度固定防止被input变形
  border="1"                            //定义边框像素大小
  cellpadding="0"                       //边框与其内容的间隙大小
  cellspacing="0"                       //边框与边框之间的间隙大小

<tr></tr>:
  style="line-height: 40px"//行高度
<th></th>：
  colspan="1"//列数
  rowspan="2"//行数
  style=" width:6% ;"//列宽度
  style="background-color:#fafafa;"//单元格背景颜色

<span></span>:
  style="font-size: 18px;"  //span内字体大小

代码部分： 

<el-switch v-model="editable" active-text="解锁" inactive-text="锁定" style="margin:10px 0 0 0"></el-switch>

<table style=" padding-left : 20px ;padding-right: 20px;width: 100%; border-color: #ccc; border-collapse: collapse;table-layout: fixed;"
             border="1" cellspacing="0" cellpadding="0"   :data="formData" >
        <tr style="line-height: 40px">
          <th colspan="1" style=" width:6% ;background-color:#fafafa;"></th>
          <th colspan="1" style=" width:6% ;background-color:#fafafa;"></th>
          <th colspan="6" style=" width:66% ;background-color:#fafafa;">收水</th>
          <th colspan="2" rowspan="2" style=" width:22% ;background-color:#fafafa;">西林水</th>
        </tr>
        <tr  style="line-height: 40px">
          <th colspan="1" style=" background-color:#fafafa;"></th>
          <th colspan="1" style=" background-color:#fafafa;"></th>
          <th colspan="2" style=" background-color:#fafafa;">站内量</th>
          <th colspan="2" style=" background-color:#fafafa;">交接量</th>
          <th colspan="2" style=" background-color:#fafafa;">对比盈亏</th>
        </tr>
        <tr  style="line-height: 40px">
          <th colspan="1" style=" background-color:#fafafa;"></th>
          <th colspan="1" style=" background-color:#fafafa;"></th>
          <th colspan="1" style=" background-color:#fafafa;">日计</th>
          <th colspan="1" style=" background-color:#fafafa;">月累</th>
          <th colspan="1" style=" background-color:#fafafa;">日计</th>
          <th colspan="1" style=" background-color:#fafafa;">月累</th>
          <th colspan="1" style=" background-color:#fafafa;">日计</th>
          <th colspan="1" style=" background-color:#fafafa;">月累</th>
          <th colspan="1" style=" background-color:#fafafa;">日计</th>
          <th colspan="1" style=" background-color:#fafafa;">月累</th>
        </tr>
        <!--        方差行-->
        <tr  style="line-height: 40px">
          <th colspan="1" rowspan="2" style=" background-color:#fafafa;">西林线</th>
          <th colspan="1" style=" background-color:#fafafa;">方差</th>
          <th colspan="1" style=" background-color:#fafafa;">
            <span v-if="editable == false">{{formData.orgName}}</span>
            <el-input  v-else style="width: 100%" v-model="formData.orgName"></el-input>
          </th>
          <th colspan="1" style=" background-color:#fafafa;">
            <span>{{formData.orgName}}</span>
          </th>
          <th colspan="1" style=" background-color:#fafafa;">
            <span v-if="editable == false">{{formData.orgName}}</span>
            <el-input  v-else style="width: 100%" v-model="formData.orgName"></el-input>
          </th>
          <th colspan="1" style=" background-color:#fafafa;">
            <span>{{formData.orgName}}</span>
          </th>
          <th colspan="1" style=" background-color:#fafafa;">
            <span>{{formData.orgName}}</span>
          </th>
          <th colspan="1" style=" background-color:#fafafa;">
            <span>{{formData.orgName}}</span>
          </th>
          <th colspan="1" style=" background-color:#fafafa;">
            <span>{{formData.orgName}}</span>
          </th>
          <th colspan="1" style=" background-color:#fafafa;">
            <span>{{formData.orgName}}</span>
          </th>
        </tr>
        <tr  style="line-height: 40px">
          <th colspan="1" style=" background-color:#fafafa;">密度</th>
          <th colspan="1" style=" background-color:#fafafa;"></th>
          <th colspan="1" style=" background-color:#fafafa;"></th>
          <th colspan="1" style=" background-color:#fafafa;"></th>
          <th colspan="1" style=" background-color:#fafafa;"></th>
          <th colspan="1" style=" background-color:#fafafa;"></th>
          <th colspan="1" style=" background-color:#fafafa;"></th>
          <th colspan="1" style=" background-color:#fafafa;"></th>
          <th colspan="1" style=" background-color:#fafafa;"></th>
        </tr>
        <!--        -->
        <tr  style="line-height: 40px">
          <th colspan="1" rowspan="6" style=" background-color:#fafafa;">罐存情况</th>
          <th colspan="1" style=" background-color:#fafafa;">罐号</th>
          <th colspan="1" style=" background-color:#fafafa;">1#</th>
          <th colspan="1" style=" background-color:#fafafa;">2#</th>
          <th colspan="1" style=" background-color:#fafafa;">3#</th>
          <th colspan="1" style=" background-color:#fafafa;">4#</th>
          <th colspan="1" rowspan="2" style=" background-color:#fafafa;">水库存</th>
          <th colspan="3" rowspan="2" style=" background-color:#fafafa;">计划执行情况</th>
        </tr>
        <tr  style="line-height: 40px">
          <th colspan="1" style=" background-color:#fafafa;">罐位</th>
          <th colspan="1" style=" background-color:#fafafa;">
            <span v-if="editable == false">{{formData.orgName}}</span>
            <el-input  v-else style="width: 100%" v-model="formData.orgName"></el-input>
          </th>
          <th colspan="1" style=" background-color:#fafafa;">
            <span v-if="editable == false">{{formData.orgName}}</span>
            <el-input  v-else style="width: 100%" v-model="formData.orgName"></el-input>
          </th>
          <th colspan="1" style=" background-color:#fafafa;">
            <span v-if="editable == false">{{formData.orgName}}</span>
            <el-input  v-else style="width: 100%" v-model="formData.orgName"></el-input>
          </th>
          <th colspan="1" style=" background-color:#fafafa;">
            <span v-if="editable == false">{{formData.orgName}}</span>
            <el-input  v-else style="width: 100%" v-model="formData.orgName"></el-input>
          </th>
        </tr>
        <tr  style="line-height: 40px">
          <th colspan="1" style=" background-color:#fafafa;">混水</th>
          <th colspan="1" style=" background-color:#fafafa;">
            <span v-if="editable == false">{{formData.orgName}}</span>
            <el-input  v-else style="width: 100%" v-model="formData.orgName"></el-input>
          </th>
          <th colspan="1" style=" background-color:#fafafa;">
            <span v-if="editable == false">{{formData.orgName}}</span>
            <el-input  v-else style="width: 100%" v-model="formData.orgName"></el-input>
          </th>
          <th colspan="1" style=" background-color:#fafafa;">
            <span v-if="editable == false">{{formData.orgName}}</span>
            <el-input  v-else style="width: 100%" v-model="formData.orgName"></el-input>
          </th>
          <th colspan="1" style=" background-color:#fafafa;">
            <span v-if="editable == false">{{formData.orgName}}</span>
            <el-input  v-else style="width: 100%" v-model="formData.orgName"></el-input>
          </th>
          <th colspan="1" style=" background-color:#fafafa;"></th>
          <th colspan="1" style=" background-color:#fafafa;"></th>
          <th colspan="1" style=" background-color:#fafafa;">月计划</th>
          <th colspan="1" style=" background-color:#fafafa;">已完成</th>
        </tr>
        <tr  style="line-height: 40px">
          <th colspan="1" rowspan="3" style=" background-color:#fafafa;">运销记事</th>
          <th colspan="9" rowspan="1" style=" background-color:#fafafa;">今日收水方差亏{{''}}m³，密度盈{{''}}kg/m³,含水盈{{''}}%</th>
        </tr>
        <tr  style="line-height: 40px">
          <th colspan="9" rowspan="1" style=" background-color:#fafafa;padding-left: 20px" align="left">
            <el-col :span="8">
              收进口水泵运行时长：
              <span v-if="editable == false">{{formData.orgName}},</span>
              <el-input  v-else style="width: 200px" v-model="formData.orgName"></el-input>
            </el-col>
            <el-col :span="8">
              临家口泵运行时长：
              <span v-if="editable == false">{{formData.orgName}},</span>
              <el-input  v-else style="width:200px" v-model="formData.orgName"></el-input>
            </el-col>
          </th>
        </tr>
        <tr  style="height: 120px">
          <th colspan="9"rowspan="1" style=" background-color:#fafafa;" >
            <span v-if="editable == false">{{formData.orgName}}</span>
            <el-input type="textarea" :rows="5"
                      v-else style="width: 100%;height: 100%" v-model="formData.orgName">
            </el-input>
          </th>
        </tr>
      </table>

data(){
    return{
      formData:{
        orgName:'',
        },
      editable:false,
    }
  },