vue+iview table tfooter编辑功能

HTML部分：(table套娃)

<i-table width="100%" size="small" :height="tableHeight" border stripe :columns="dataCol" :data="DocInfo.list">
    <template #类型="{ row, index }">
        {{ row.类型 }}
    </template>
    <template #名称="{ row, index }">
        {{ row.名称 }}
    </template>
    <template #内容="{ row, index }">
        <a v-if="row.类型=='链接'" :href="row.内容" target="_blank">{{row.内容}}</a>
        <a v-else-if="row.类型=='文件'" href="javascript:;" @click="dfLoad(row.内容,row.名称)">{{row.内容}}</a>
        <span v-else-if="row.类型=='文本'">{{row.内容}}</span>
        <img class="docImg" v-else :src="row.内容" width="60" height="60" style="object-fit:cover" />
    </template>
    <template #操作="{ row, index }">
        <div v-if="opType=='edit'">
            <poptip confirm transfer
                    title="是否确定删除当前项?"
                    @on-ok="delDetails(row.编号)"
                    ok-text="确定"
                    cancel-text="取消">
                <i-button size="small" type="warning">删除</i-button>
            </poptip>
        </div>
    </template>
    <template #footer>
        <i-table width="100%" size="small" border stripe :columns="dataCol" :show-header="false" :data="addTable">
            <template #类型="{ row, i }">
                <i-select v-model="addData.类型" :transfer="true">
                    <i-option value="链接">链接</i-option>
                    <i-option value="文本">文本</i-option>
                    <i-option value="文件">文件</i-option>
                    <i-option value="图片">图片</i-option>
                </i-select>
            </template>
            <template #名称="{ row, i }">
                <i-input type="text" v-model="addData.名称" :disabled="addData.类型=='文件'||addData.类型=='图片'" placeholder="附件名称"></i-input>
            </template>
            <template #内容="{ row, i }">
                <i-input type="text" v-if="addData.类型=='链接'||addData.类型=='文本'" v-model="addData.内容" placeholder="附件内容"></i-input>
                <space v-else style="display:flex">
                    <i-input type="text" v-if="addData.内容!=''" v-model="addData.内容" readonly></i-input>
                    <upload ref="upload"
                            :show-upload-list="false"
                            :on-success="UpLoadSuccess"
                            :action="UpLoadUrl">
                        <i-button icon="ios-cloud-upload-outline">上传文件</i-button>
                    </upload>
                </space>
            </template>
            <template #操作="{ row, i }">
                <i-button style="margin:0 3px" size="small" type="success" @click="saveDetails">保存</i-button>
            </template>
        </i-table>
    </template>
</i-table>

JS部分：

data(){
	opType: 'create',
     addData: {
         类型: '链接',
         名称: '',
         内容: ''
     },//新增内容
}
...