请问iView中的Table组件显示完毕后，动态更新columns属性的className是否无效？是否有其他办法可以动态更新？

Question

我希望通过异步加载获得的数据，动态更新Table组件的columns，为其设置不同的className以获得不同颜色的背景，但发现在created()里设置是有效的，但在异步加载后（Table组件显示完成后）就无效了，请问有什么解决办法没？
以下是我的测试代码：

<template>
    <div>
        <Table :columns="columns" :data="data"></Table>
    </div>
</template>

<style>
    .ivu-table td.colored {
        background-color: #2db7f5;
        color: #fff;
    }
</style>

<script>
    export default {
        data: function () {
            return {
                columns: [
                    {
                        title: "A",
                        className: "colored", // 此处有效
                        key: "a"
                    },
                    {
                        title: "B",
                        key: "b"
                    },
                    {
                        title: "C",
                        key: "c"
                    }
                ],
                data: [
                    {
                        a: "a",
                        b: "b",
                        c: "c"
                    }
                ]
            }
        },
        created() {
            // 此处有效
            this.columns[1].className = "colored";

            setTimeout(() => {
                // 此处无效
                this.columns[2].className = "colored";
            });
        }
    }
</script>

测试结果为最后一处设置的className，也就是C列无效。

Answer 1

你在这句

this.columns[2].className = "colored";

之后加

console.log(this.columns[2]);

会发现，其实this.columns已经改变了，只是没有出发视图更新。
官网上的解决方法是用 Vue.set 方法检测数组变化，

具体操作可以查看官网：https://vuefe.cn/v2/guide/lis...数组变化检测-Array-Change-Detection