表单和下拉选择树TreeSelec联合使用报错:Error in callback for watcher "value":"TypeError:Cannot set property 'isSelect' of null".


做vue项目的时候遇到这么一个场景,有一个表格,且表格中”事件类型“那一列的属性值,可更改。事件类型那一块是一个下拉树选择框,如下所示:

image-20210127110345581

一般这样的功能都是通过插槽实现的,部分代码如下:

<el-table-column
    prop="recordType"
    label="事件类型"
    align="center"
    width="290"
    sortable>
        <template slot-scope="scope">
            <el-tree-select
                :clearable="true"
                v-model="scope.row.recordType"
                :data="recordClassList"
                placeholder="请选择事件类型"
                :expand-on-click-node="true"
                :default-expand-all="false">
            </el-tree-select>
           </template>
</el-table-column>

其中,recordClassList是TreeSelect 下拉树选择框绑定的数据。

表格加载后,报错如下:

image-20210127104458762

我一开始以为,表格中获取不到值,所以在表格中输出了一下:

image-20210127104738640

发现表格实际是可以获取到值的,但是选择框中不显示。后续请教了一下师父,才恍然大悟。

下拉树的数据和表格的数据都是异步的,若是先渲染表格中的数据,再渲染下拉树的数据,肯定会报错,因为下拉树中没有值。所以应该先把下拉树的数据拿到之后,再去渲染表格中的数据。结果就可以了:

image-20210127105306711

一定要注意这一点,当使用类似下拉框的时候,若是下拉框数据是从后台获取的,在使用下拉框前,要确保,这个下拉框数据已经从后台获取到了,不然就会像我这样跳坑。

这个坑,坑就坑在,你后续查看的时候,下拉框是有数据的,所以,你就会是认为是选择框数据没获取到,或者下拉框封装的有问题。

实际却是,下拉框数据渲染在表格渲染之后,即:使用下拉框的那一刻,下拉框中是没有数据,即便后面有数据了,也起不到作用了。


文章作者: 木华
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 木华 !
评论