vue里的组件既传递状态又传递其它参数的方法

文章介绍了如何在VueIViewTable组件中使用Switch开关时，同时获取组件状态（如true/false）和slot中的row数据。通过修改onChange事件处理函数，可以实现这两者的同时获取。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以IView的Switch 开关组件为例。它的OnChange事件本身会传递组件当前的状态。
Switch

把Switch放到表格的slot里，触发change事件时，只会得到当前Switch的状态

 <Table border :columns="Columns" :data="Data" height='580' stripe :loading='loading'>
                <template slot-scope="{ row, index }" slot="switch">
                    <i-Switch  :value="row.switch" size="large" @on-change="switchChange">
                        <span slot="open">是</span>
                        <span slot="close">否</span>
                    </i-Switch>
                </template>
</Table>
 switchChange(status) {
            console.log(status)//只会得到 true 、 false
 },

如果我们想得到slot的row数据，并对代码做了如下修改。

 <Table border :columns="Columns" :data="Data" height='580' stripe :loading='loading'>
                <template slot-scope="{ row, index }" slot="switch">
                    <i-Switch  :value="row.switch" size="large" @on-change="switchChange(row)"> //注意此处
                        <span slot="open">是</span>
                        <span slot="close">否</span>
                    </i-Switch>
                </template>
</Table>
 switchChange(row) {
            console.log(row)// Object
 },

则会得到row的数据。
那如果既想到Switch的status又想得到row的数据，有没有办法呢？答案当然是有的

 <Table border :columns="Columns" :data="Data" height='580' stripe :loading='loading'>
                <template slot-scope="{ row, index }" slot="switch">
                    <i-Switch  :value="row.switch" size="large" @on-change="(status) => switchChange(status, row, index)"> //注意此处
                        <span slot="open">是</span>
                        <span slot="close">否</span>
                    </i-Switch>
                </template>
</Table>
 switchChange(status, row, index) {
            console.log(status, row, index)// 可分别得到status，row，index
 },