使用插槽实现iview的选择前面框出现对应数据可编辑

最新推荐文章于 2024-01-18 18:27:03 发布

qq_43469899

最新推荐文章于 2024-01-18 18:27:03 发布

阅读量728

点赞数

分类专栏： slot 文章标签： vue

本文链接：https://blog.csdn.net/qq_43469899/article/details/103781371

版权

本文介绍了一种使用slot插槽改进iview选择框的方法，以提高表格可编辑状态的效率。相较于上一篇使用render方法，通过插槽可以直接获取index，避免大量循环导致的性能下降。详细代码将在文中分享。

摘要由CSDN通过智能技术生成

这一篇依旧是接上一篇博文的样式进行改进的另外一种方法
上一篇写到需求是,点击前面框后面对应当前行的最后一列要变成输入框实现表格的可编辑状态,然后将本列对象放到一个新的数组里面去,取消勾选的话当然要去除改编后的值变成原来的值,然后将新数组的对象传到后台去进行提交操作,上一篇用到的是render方法,今天给大家科普一下使用slot插槽的方法
顺便给大家提一下为什么要改成这种使用插槽的方法:看过我上一篇博客的博友应该有注意到我匹配点击前行用的是循环匹配的方法,这种方法虽然是可以达到效果但是效果不佳,数据量一旦达到一定数额的时候就会循环多次从而使得速度变慢,正是本着这种思维想到能直接拿到对应的index就什么问题都迎刃而解了,所以还是走了slot插槽这个老套路!不多解释了上代码:

<Table ref="registerTable" :width="contentWidth" :max-height="contentHeight-170" :columns="tableColumns" :data="tableData">
        <template slot-scope="{ index }" slot="Checkbox">
            <Checkbox v-model="tableData[index]._isChecked" @on-change="selectRowCancel(index)"></Checkbox>
        </template>
        <template slot-scope="{ row,index }" slot="jymj">

最低0.47元/天解锁文章