关于使用wetouch的ui-table标签不能通过 设置start-refresh为true实现table的立即刷新的一种解决方法

由于移动端用的wetouch框架来开发,这里要做一个需要实时刷新的list展示,并且又不想用table标签来做,所以在开发文档中找到
wetouch组件:ui-table

但是这里遇到了一个刷新的问题 即设置start-refresh为true实现table的立即刷新,用文档里提供的这个方法始终不能实现随时刷新,

后来不得已 直接不用ui-table里的自带的url属性 而是通过ui.request({})直接调用接口将值查出来塞入ui-table标签中的 ui:model="thisData"中关键代码如下

 <ui-view>
      <ui-table header="{{thisHeader}}" ui:model="thisData" alternating-row="true" is-login="true" sticky="true" tap-effect></ui-table>
    </ui-view>
 data() {
    return {
      webapiContext: ui.getApp().globalData.webapiContext,
      user: ui.getStorageSync('userinfo'),
      uid: "",
      url: '',
      search: "",
      thisHeader: [{
        name: 'stockname',
        display: '名称',
        align: "center",
        headerAlign: "center",
      }, {
        name: 'stockcode',
        display: '代码',
        align: "center",
        headerAlign: "center",
      }, {
        name: 'currentprice',
        display: '最新价',
        align: "center",
        headerAlign: "center",
        render: (h, params) => {
          let currentprice = this.thisData.rows[params].currentprice;
          if (currentprice == null) {
            currentprice = 0;
          }
          return h("div", {}, [
            h("span", {
              style: {
                color: "#e60012"
              }
            }, currentprice.toFixed(2))
          ]
          );
        }
      }, {
        name: 'gain',
        display: '涨幅',
        align: "center",
        headerAlign: "center",
        render: (h, params) => {
          let gain = this.thisData.rows[params].gain;
          if (gain == null) {
            gain = 0;
          }
          let color;
          if (gain >= 10) {
            color = '#E31515';
          } else {
            color = '#028912';
          }
          return h("div", {}, [
            h("span", {
              style: {
                background: color,
                color: "#fff",
              }
            }, gain.toFixed(2))
          ]
          );
        }
      }, {
        name: 'operate',
        display: '操作',
        align: "center",
        headerAlign: "center",
        render: (h, params) => {
          var that = this;
          return h('div', {}, [
            h('span', {
              style: {
                color: '#F80408',
                margin: '5px',
              },
              on: {
                click: function (e) {
                  let stockname = that.thisData.rows[params].stockname;
                  let stockcode = that.thisData.rows[params].stockcode;
                  that.skipToStrategy(stockname, stockcode);
                }
              }
            }, '买入'),
            h('span', {}, '|'),
            h('span', {
              style: {
                color: '#220BF2',
                margin: '5px',
              },
              on: {
                click: function (e) {
                  let stockname = that.thisData.rows[params].stockname;
                  let stockcode = that.thisData.rows[params].stockcode;
                  that.removeData(stockname, stockcode);
                }
              }
            }, '移除'),
          ])
        }
      }],
      
      thisData: {},//这里是给表赋值的data
     
      pageLoad: {
        trigger: 'always',
        handle: () => {
          var that = this
          ui.getApp().reloadUserInfo(function (userInfo) {
            that.user = userInfo;

            that.initDataUrl();//加载页面即刷新list数据
          });
        }
      }
    }
  },
methods: {
    initDataUrl() {
      var that = this;
      if (that.user != null) {
        that.uid = that.user.data.id;
        var url = that.webapiContext + "/xnn/client/stocksMychoice/getAllMychoice.json?uid=" + that.uid + "&timestamp=" + (new Date().getTime());
        ui.request({
          url:
            url,
          data: {},
          method: "GET",
          success: function (res) {
            that.thisData = res.data;
          },
          fail: function (res) {
          }
        });
      }
    },
.
.
.
}

以上就是关键代码,如果遇到这个问题的人应该可以看懂吧,这里的想刷新的话直接通过调用 initDataUrl()就可以了

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Element-UI 是一套基于 Vue.js 2.0 的 UI 组件库,提供了丰富的组件和模板,方便我们快速开发页面。其中,Table 组件是常用的数据展示组件之一,我们可以通过封装一个 TableList 组件来简化 Table使用。 以下是一个简单的 TableList 封装示例: ```vue <template> <div> <el-table :data="tableData" :height="height" :max-height="maxHeight" :stripe="stripe" :border="border" :default-sort="defaultSort" :show-header="showHeader" :highlight-current-row="highlightCurrentRow"> <el-table-column v-for="(column, index) in columns" :key="index" :label="column.label" :prop="column.prop" :width="column.width" :min-width="column.minWidth" :fixed="column.fixed" :resizable="column.resizable" :formatter="column.formatter" :show-overflow-tooltip="column.showOverflowTooltip"></el-table-column> </el-table> </div> </template> <script> export default { name: "TableList", props: { tableData: { type: Array, default: () => [] }, columns: { type: Array, default: () => [] }, height: { type: String, default: "" }, maxHeight: { type: String, default: "" }, stripe: { type: Boolean, default: true }, border: { type: Boolean, default: true }, defaultSort: { type: Object, default: () => {} }, showHeader: { type: Boolean, default: true }, highlightCurrentRow: { type: Boolean, default: true } } }; </script> ``` 在这个组件中,我们定义了以下 props: - `tableData`:表格数据,类型为 Array。 - `columns`:表格列的配置项,类型为 Array。每个配置项包含 `label`(列名)、`prop`(对应数据源的字段名)、`width`(列宽度)等属性。 - `height`:表格高度,类型为 String。 - `maxHeight`:表格最大高度,类型为 String。 - `stripe`:是否显示斑马纹,类型为 Boolean。 - `border`:是否显示边框,类型为 Boolean。 - `defaultSort`:默认排序规则,类型为 Object,包含 `prop`(排序字段名)和 `order`(排序方式)两个属性。 - `showHeader`:是否显示表头,类型为 Boolean。 - `highlightCurrentRow`:是否高亮当前行,类型为 Boolean。 通过封装这个 TableList 组件,我们可以在项目中更加方便地使用 Element-UITable 组件,同时也可以减少代码重复。 ### 回答2: element-ui是一款基于Vue.js的UI组件库,而tableList是element-ui中的一个组件封装。 tableList组件的主要作用是用于展示和管理数据表格。它提供了丰富的功能和选项,使得我们可以快速地构建出符合需求的数据表格界面。 首先,我们可以通过tableList组件来定义表格的列,包括列的名称、宽度、对齐方式等。可以根据实际需求设置不同的列,并且还可以对列进行排序、隐藏等操作。 其次,tableList组件还支持分页功能,可以根据数据的大小自动生成相应的分页器,方便用户浏览和查找数据。 另外,tableList还提供了搜索和筛选的功能,用户可以根据表格中的内容进行搜索和筛选操作,以方便快速找到想要的数据。 此外,tableList还支持多选、单选等操作,用户可以通过复选框或者单选按钮来选择需要的数据进行操作。 总的来说,tableList是element-ui中的一个封装组件,它简化了数据表格的开发和管理,提供了丰富的功能和选项,使得我们能够更加灵活和高效地展示和管理数据表格。 ### 回答3: element-ui封装中的tableList是对element-ui中的Table组件进行封装后的一个自定义组件。该组件可以方便地在项目中使用Table,减少重复代码的编写。 tableList的特点是具有高度的可定制性和扩展性。通过传入不同的参数和配置,可以实现不同的表格功能和样式。例如,可以通过指定columns来定义表格的列数和展示内容;通过指定data来传入数据源;通过设置pagination来实现分页等功能。 在tableList组件中,我们还可以通过插槽(slot)的方式来自定义表格的一些样式和功能。比如,可以使用slot="header"来自定义表头,使用slot-scope在插槽内部可以访问到每一行的数据。 除了基本的表格功能外,tableList还可以在数据源发生变化时进行自动刷新,通过设置@refresh事件来实现数据的实时更新。 总之,element-ui封装的tableList组件可以帮助我们快速搭建出功能齐全、扩展性强的表格展示页面。它简化了我们对Table组件的使用,提高了开发效率,同时保留了element-ui原本的特性和优势。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值