账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    使用elementUI级联选择器,懒加载后修改列表数据,当前展示的数据如何实时改变?
    21
    0

    问题:
    elementUI版本是2.11, 当级联选择器懒加载后,马上修改数据当前列表不会实时更新

    代码:

     <template>
      <div>
        <el-button @click="editorCategory" :disabled="canUserButton">编辑</el-button>
        <el-cascader-panel :options="options2" :props="newMethod">
          <template slot-scope="{ node, data }">
            <span style="display: inline-block; width: 100%"  @click="detailNode(node)">{{ data.label }}</span>
          </template>
        </el-cascader-panel>
      </div>
    </template>
    
    <script>
      export default {
        data () {
          return {
            props: {
              value: 'id',
              children: 'children'
            },
            newMethod: {
              lazy: true,
              lazyLoad (node, resolve) {
                console.log(node)
                if (!node.data) {
                  return
                }
                if (node.data) {
                  self.getChildLevel(node.data.id).then(() => {
                    resolve(self.childData)
                  })
                }
              }
            }
          }
        },
        methods: {
          editorCategoryConfirm (val) {
            this.fullscreenLoading = true
            updateCategory(val).then((res) => {
              this.fullscreenLoading = false
              console.log(res)
              if (res.data.code === 2001) {
              this.$alert(res.data.message, '警告', {
                confirmButtonText: '确定',
                type: 'warning',
                customClass: 'sysUserBox'
              })
            } else {
                this.$alert(res.data.message, '通知', {
                  confirmButtonText: '确定',
                  type: 'success',
                  customClass: 'sysUserBox',
                  callback: () => {
                  }
                })
              }
            })
          },
        }
      }
    </script>

    数据懒加载后我进行新增、删除、编辑操作,如何才能改变已经懒加载的数据?

    我自己的思路是数据操作后,再调一次lazyLoady函数对之前懒加载的数据进行覆盖,但是我不知道如何操作,希望能帮助我谢谢

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • 琉璃〆玥倾城╮ 普通会员 1楼

      在使用Element UI的级联选择器进行数据懒加载后,当用户选择一个选项时,新的数据将会被加载并更新到列表中。

      以下是一个简单的例子:

      首先,我们需要在组件中添加一个级联选择器:

      ```html <el-cascader :data="countryData" placeholder="选择国家" v-model="selectedCountry" @change="handleCountryChange"

      ```

      然后,我们需要在组件的methods中处理change事件:

      javascript export default { data() { return { countryData: [], selectedCountry: '', }; }, methods: { handleCountryChange(value) { this.countryData = value.split(','); }, }, };

      在这个例子中,当用户在选择器中选择一个选项时,handleCountryChange方法将会被调用。在这个方法中,我们首先将选择的选项分割成一个数组,然后将这个数组作为参数传递给this.countryData

      最后,我们可以在组件的模板中使用这个新的countryData数组来更新列表:

      ```html <el-table :data="countryData" style="width: 100%" @selection-change="handleSelectionChange"

      ```

      在模板中,我们使用<el-table>组件来显示列表,并在表格的每行中添加一个下拉菜单。当用户在下拉菜单中选择一个选项时,handleSelectionChange方法将会被调用,然后我们将这个选项作为参数传递给this.countryData

      这样,当用户选择一个选项时,新的数据将会被加载并更新到列表中。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部