zoukankan      html  css  js  c++  java
  • ivew table组件二次封装,解决slot-scope跨组件传递的问题

    1. 需求

    iview Table组件支持自定义列模板

    <template>
        <Table :columns="columns" :data="tableData">
            <template slot-scope="{ row }" slot="name">
                <strong>{{ row.name }}</strong>
            </template>
        </Table>
    </template>
    <script>
        export default {
            data () {
                return {
                    columns: [
                        {
                            title: 'Name',
                            slot: 'name'
                        }
                    ],
                    tableData: [{ name: 'John Brown' }]
                }
            }
        }
    </script>
    

    工作中,常常会对Table组件进行二次封装,那么怎么将插槽内容从父组件中传入封装的组件中呢?

    2. 解决办法

    封装的组件custom-table.vue

    <template>
        <Table :columns="columns" :data="tableData">
            <template  v-for="column in columns"  :slot="column.slot?column.slot:''" slot-scope="params" >
    			<slot :name="column.slot?column.slot:''" v-bind="params" ></slot>
    		</template>
        </Table>
    </template>
    <script>
        export default {
            props: [columns, tableData]
        }
    </script>
    

    在父组件list.vue中使用如下:

    <template>
        <custom-table :columns="columns" :tableData="tableData">
            <template slot-scope="params" slot="operater">{{params.row.id}}</template>
        </custom-table>
    </template>
    <script>
        import CustomTable from "@/components/custom-table";
        export default {
            components: { CustomTable },
            data() {
                return {
                    tableData: [{id: 1}],
                    columns: [{
                        title: '操作',
                        slot: 'operater'
                    }]
                }
            }
        }
    </script>
    

    封装后使用方式和原iview Table保持一致。

  • 相关阅读:
    java json 库之 jackson
    java 多线程
    golang slice 和 string 重用
    golang 字节对齐
    golang 并发编程之生产者消费者
    golang 设计模式之选项模式
    golang aws-sdk-go 之 s3 服务
    markdown 一个优雅的写作工具
    常见句型、用法
    hg
  • 原文地址:https://www.cnblogs.com/XHappyness/p/13158737.html
Copyright © 2011-2022 走看看