本文已参与「新人创作礼」活动,一起开启掘金创作之路
效果
需求: 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)
})
},