<el-table
          size="small"
          :data="invoice"
          :span-method="arraySpanMethod"
          style="width: 100%"
          height="490">
          <el-table-column
            type="index"
            width="50">
          </el-table-column>
          <el-table-column
            prop="date"
            label="合同编号"
            width="150">
            <template slot-scope="scope">
              <el-input size="mini"  v-model=scope.row.contractCode></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="上传合同扫描件"
            width="150">
            <template slot-scope="scope">
              <!-- #409EFF -->
              <div style="background: #409EFF;text-align: center;color:white;border-radius: 5px;font-size: 13px;"><p>请上传对应和同</p><p>的发票扫描件</p></div>
            </template>
          </el-table-column>
          <el-table-column
            prop="province"
            label="发票类型"
            width="150">
            <template slot-scope="scope">
              <div v-for="(item, index) in invoice[scope.$index].invoices" :key="index">
                <el-input size="mini" style="margin-top: 0px;width: 130px"  v-model=scope.row.title></el-input>
                <el-input size="mini" style="margin-top: 0px;width: 100px"  v-model=scope.row.title></el-input>
                <el-input size="mini" style="margin-top: 0px;width: 100px"  v-model=scope.row.title></el-input>
                <el-input size="mini" style="margin-top: 0px;width: 100px"  v-model=scope.row.title></el-input>
                <el-input size="mini" style="margin-top: 0px;width: 120px"  v-model=scope.row.title></el-input>
                <p style="display:inline-block;margin-left: 20px;margin-top: 3px;width:70px;height:20px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">融资扫描件啊</p>
                <p style="display:inline-block;margin-left: 30px;width:40px;height:30px;overflow: hidden;">
                  <img src="../../assets/images/step_27.jpg">
                </p>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="city"
            label="发票代码"
            width="120">
          </el-table-column>
          <el-table-column
            prop="province"
            label="发票号码"
            width="100">
          </el-table-column>
          <el-table-column
            prop="province"
            label="发票金额"
            width="100">
          </el-table-column>
          <el-table-column
            prop="province"
            label="发票日期"
            width="120">
          </el-table-column>
          <el-table-column
            prop="address"
            label="发票扫描件"
            width="100">
          </el-table-column>
          <el-table-column
            prop="zip"
            label="操作"
            width="100">
          </el-table-column>
        </el-table>

获取当前数组的下标使用 

scope.$index :获取当前行的下标
scope.row:获取当前行的对象              然后使用v-for遍历,

v-for="(item, index) in invoice[scope.$index].invoices"

合并列

     //合并列
      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
          if (columnIndex === 3) {
            return [1, 7];
          }else if (columnIndex === 9){
            return [1,1];
          }
      }

通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan,第二个元素代表colspan。 也可以返回一个键名为rowspancolspan的对象。

Logo

前往低代码交流专区

更多推荐