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)
                }
    }
  • 相关阅读:
    sinaapp+wordpress
    用JavaScript实现本地缓存
    Javascript的IE和Firefox(火狐)兼容性
    150个javascript特效
    学习Javascript闭包(Closure)
    JS bingo卡片
    Response.Write详细介绍[转]
    JS实现鼠标经过时背景色缓慢改变
    为什么引用不了App_Code里的类
    SQL SERVER 2008 R2配置管理器出现“远程过程调用失败”【0x800706be】的解决办法
  • 原文地址:https://www.cnblogs.com/lezuw/p/11358468.html
Copyright © 2011-2022 走看看