利用“data-format-item”自定义selectpage输入框

FastAdmin动态下拉列表,利用data-format-item,可以自定义列表行,那输入框内容怎么自定义?

先试过追加属性,达到目的,但有些地方不想要追加的属性,却不好去掉。

最后,打开require-form.jsrequire-backend.min.js,在Form.events.selectpage插入如下代码:

$('.selectpage', form).each(function () {
    var $this = $(this);
    if($this.attr('data-field')) return;
    if(!$this.attr('data-format-item')) return;

    if($this.val()) {
        //“编辑”视图,等初始数据返回,调整一下输入框内容
        var observer = setInterval(() => {
            var selectPage = $this.data('selectPageObject');
            if (!selectPage || !selectPage.data) return;
            afterInput(selectPage.data[0], selectPage);
            clearInterval(observer);
        }, 100);
    }

    $this.data("eSelect", afterInput);

    function afterInput(selectItem, selectPage) {
        if(!selectItem) return;
        if(!selectPage) return;
        var text = selectPage.option.formatItem(selectItem);
        var $other = $this.closest('div.sp_container').find('input.sp_input');
        $other.val(text);
    };
});

调整相应view,不要指定"data-field",必须填写"data-format-item",例如:

<input id="c-book_id" data-rule="required" data-source="book/index" data-order-by="id" data-format-item="{id} {name}" data-search-field="id,name" class="form-control selectpage" name="row[book_id]" type="text" value="">
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在uni-app中,可以通过自定义数据源来实现uni-data-select的自定义数据源。 首先,你需要创建一个包含所需数据的数据源数组。每个数据源对象应包含`text`和`value`属性,分别表示显示的文本和对应的值。 接下来,在页面中使用`uni-data-select`组件,并通过`data-source`属性将自定义的数据源数组传递给组件。 以下是一个示例代码,展示如何在uni-app中自定义数据源并使用`uni-data-select`组件: ```html <template> <view> <uni-data-select :data-source="dataSource" @select="onDataSelect" > <view class="data-select"> {{ selectedValue }} </view> </uni-data-select> </view> </template> <script> export default { data() { return { dataSource: [ { text: 'Option 1', value: 'option1' }, { text: 'Option 2', value: 'option2' }, { text: 'Option 3', value: 'option3' }, ], selectedValue: '', }; }, methods: { onDataSelect(event) { this.selectedValue = event.target.value; // 在这里可以处理选项变化后的逻辑 }, }, }; </script> ``` 在上述示例中,我们创建了一个包含三个选项的数据源数组,并将其传递给`uni-data-select`组件的`data-source`属性。当选择发生变化时,通过监听`select`事件获取选中的值,并将其赋值给`selectedValue`变量。你可以根据自己的需求修改数据源数组的内容,并在`onDataSelect`方法中处理选项变化后的逻辑。 希望以上示例能帮助你自定义uni-data-select的数据源。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值