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)
                }
    }
  • 相关阅读:
    Mysql 触发器
    Mysql 的变量
    Mysql 事务
    重置mysql管理员密码
    mysql数据备份
    Mysql的联合查询
    Mysql的存储引擎
    数据库的视图
    数据库子查询
    数据库外键
  • 原文地址:https://www.cnblogs.com/lezuw/p/11358468.html
Copyright © 2011-2022 走看看