el-table动态增行,其中一列树节点被选中或下拉框change发生变化时调接口,获取另一列的数据回显

88 阅读1分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路 效果 在这里插入图片描述

需求: A列是Treeselect树下拉,如果是普通的select下拉也不影响 当选择完树节点在树节点选择事件中或下拉的change事件中,要调接口,拿J列的值进行回显 最重要的是要拿到点击行的行号,通过scope.$index可以获取到当前行的索引

<el-table-column label="xx分类" align="center" prop="assetTypeName">
                  <template slot-scope="scope">                   
                        <TreeSelect
                          v-if="scope.$index !== 0"
                          v-model="scope.row.assetTypeName"
                          :options="deptOptions"
                          clearable
                          no-options-text="暂无可用选项"                       
                          style="width: 200px"
                          :normalizer="normalizer"
                          :disable-branch-nodes="true"
                          :appendToBody="true"
                          @select="node => treeHandleSelect(scope.$index, node)"
                        >
                          <div slot="option-label" slot-scope="{ node }" :style="{ marginLeft: !node.raw.children ? '16px' : '0' }">
                            [{{ node.raw.code }}]{{ node.raw.label }}
                          </div>
                          <div slot="value-label" slot-scope="{ node }">{{ node.raw.code ? `[${node.raw.code}]` : '' }}{{ node.raw.label }}</div>
                        </TreeSelect>                                        
                  </template>
                </el-table-column>
    treeHandleSelect(index, node) {
      getAuthFor({
        assetId: node.id,
        fiscal: this.yearsForm.fiscal,
      }).then(res => {
        this.$set(this.tableData[index], 'standardEquip', res.data.capitaRation)
      })
    },