【前端学习笔记】iview表格表头动态生成加双向绑定

最新推荐文章于 2024-05-07 13:57:22 发布

清风苑猪儿虫

最新推荐文章于 2024-05-07 13:57:22 发布

阅读量265

点赞数

分类专栏：学习文章标签：前端 vue.js html5

本文链接：https://blog.csdn.net/zouxiong122/article/details/121852160

版权

学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

实例代码：

<template>
    <div>
        <Button
            type="primary"
            @click="handleButton"
        >{{this.envAttr.data[0].paas[0].value ? '关闭' : '打开'}}</Button>
        <Table
            border
            :columns="envAttr.column"
            :data="envAttr.data"
        >
            <template
                v-for="(paas, paasIndex) in envAttr.data[0].paas"
                slot-scope="{ row, index }"
                :slot="paas.name"
            >
                {{row.paas[paasIndex].value}}
                <Checkbox
                    v-model="row.paas[paasIndex].value"
                    :key="row.paas[paasIndex].name + paasIndex + index"
                    @on-change="handleOnChange($event, row, index)"
                ></Checkbox>
            </template>
        </Table>
    </div>
</template>
<script>
export default {
    name: 'tableColumn',
    data () {
        return {
            envAttr: {
                width: 'auto',
                data: [
                    { code: 'A', paas: [{ name: 'A1', value: false }, { name: 'A2', value: false }] },
                    { code: 'B', paas: [{ name: 'B1', value: false }, { name: 'B2', value: false }] }
                ],
                column: [{
                    width: 80,
                    align: 'center',
                    type: 'selection'
                },
                {
                    key: 'code',
                    align: 'center',
                    title: '编码'
                }]
            }
        }
    },
    mounted () {
        this.envAttr.data[0].paas.forEach(paas => {
            this.envAttr.column.push({ key: paas.name, slot: paas.name, title: paas.name })
        })
    },
    methods: {
        handleButton () {
            this.envAttr.data[0].paas[0].value = !this.envAttr.data[0].paas[0].value
        },
        handleOnChange (value, row, index) {
            this.$set(this.envAttr.data, index, row)
        }
    }
}
</script>