关于vxe-table 动态渲染列和渲染行数据

2,728 阅读1分钟

关于vxe-table 动态渲染列和渲染行数据

其中关键点在于弄清楚 v-for="(config, index) 中的 config 与 #edit=“{row}” 中的 row的区别与使用方式

代码示例:

listColumn[] 为列 数据

        <vxe-table-column
            v-for="(config, index) in listColumn"
            :key="index"
            :field="config.ccode" //每列对应字段名
            :title="config.cname" //每列对应的表头名称
            :edit-render="{ autofocus: '.vxe-input--inner' }"
          >
            <template #edit="{ row }"> // 这里的row对应的是tableData表格项每一行的数据
              <aps-refer-field
                v-if="config.aissitvaluefetcher"
                :field-id="config.aissitvaluefetcher"
                :multiple="true"
                :getterid="config.aissitvaluefetcher"
                @input="selectChangeVal($event, config.aissitvaluefetcher, true)"
              />
              <vxe-input
                v-else
                v-model="row[config.ccode]"  //注意这里v-model绑定的值其中row与config的关系
                type="text"
                @input="updateFooterEvent"
              ></vxe-input>
            </template>
        </vxe-table-column>