zoukankan      html  css  js  c++  java
  • ant-design-vue table组件字段提示、格式化

    <div>
                <a-table :columns="columns" :rowKey="record => record.id" :dataSource="dataSource" :scroll="{ x: 2200 }"
                         :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
                         :pagination="pagination" :loading="loading" @change="handleTableChange" bordered>
                    <template slot="pop" slot-scope="text,record,index">
                        <div v-if="record.farmingContent==6">
                            <a-popover title="消息"  placement="right">
                                <template slot="content">
                                    <div style=" 300px;">
                                        <a-row>
                                            <a-col :span="10">提示文字:</a-col>
                                            <a-col :span="14">{{record.pestName}}</a-col>
                                        </a-row>
                                    </div>
                                </template>
                                {{farmingContentFormat(record.farmingContent)}}
                            </a-popover>
                        </div>
                        <div v-else>
                            {{farmingContentFormat(record.farmingContent)}}
                        </div>
                    </template>
                    <template slot="actions" slot-scope="text, record, index">
                        <span>
                            <a-button @click.native="handleEdit(record)" size="small" type="primary" v-has="'ams:farming:edit'">编辑</a-button>
                            <a-button @click.native="handleDelete(record.id)" size="small" type="danger" v-has="'ams:farming:delete'">删除</a-button>
                        </span>
                    </template>
                </a-table>
            </div>
    data() {
                return {
                    queryParam: {},
                    columns: [
                        { title: 'Id', dataIndex: 'id', key: 'id',  60, align: 'center' },
                        {
                            title: '农事内容',
                            dataIndex: 'farmingContent',
                            key: 'farmingContent',
                             120,
                            align: 'center',
                            scopedSlots: { customRender: 'pop' }
                        },
                        { title: '操作', key: 'actions', align: 'center',  240, fixed: 'right', scopedSlots: { customRender: 'actions' } }
                    ]
                }
            },
    methods: {
                farmingContentFormat(text) {
                    return this.dictFilter('ams_farming_content', text)
                }
    }
  • 相关阅读:
    CodeForces1152CNeko does Maths
    π的计算公式
    IFS变量对加双引号和不加双引号变量的区别对待
    各种距离
    ADO.NET Data Service 二 绑定数据类
    向客户端注入JavaScript代码
    Ajax ModelPopu and Progress 示例学习
    Sliverlight 入门教程七
    (牛人莫入)Jquery plugin 多文件上传
    自定义控件的验证使用
  • 原文地址:https://www.cnblogs.com/lezuw/p/11358468.html
Copyright © 2011-2022 走看看