编辑弹框的各种点击事件以及数据在远程搜索输入框的回显

整体代码：

editCurrent: function (item) {
        
        // 判断是否存在专题
        if (this.currentItem.topicId) {
          // this.addDataForm.topicId = this.currentItem.topicId.toString(); // 专题
          this.querySearch(this.currentItem.topicId, (formattedData) => {
            console.log('进入了formattedData回调');
            console.log(formattedData, 'formattedData');
            let title = formattedData[0].title;
            let id = formattedData[0].id;
            console.log(title, 'title');
            console.log(id, 'id');
            this.addDataForm.topicId = title; // 将专题输入框显示的暂时列为title文字 ,当点击编辑弹框的确定按钮提交时 再将this.addDataForm.topicId改为id值
            this.recordTopic = id; // 将选中的专题的id存到this.recordTopic中, 当编辑情况下点击确定的时候将专题输入框的this.addDataForm.topic的值从title改为id
            this.topicStatus = true; // 设置专题接口返回是有值的 code = 0
            // this.$message.success('已找到该专题');
          })
        }
        .......
      },

问：

怎么在远程搜索输入框输入框调用接口，请求数据，且需要将输入在远程搜索输入框的值当作参数传递给接口作为请求的参数。而且需要在请求回来后在下拉框回显，提示给用户当前有无专题。要是没有专题就不显示下拉框。

回答：

 

调用querySearch将id和cb函数传递进去，这里的id作为接口的参数。

切记：这里不能使用ajaxMethods封装的去调用接口，需要用原生的ajax或者axios才行，否则会出问题。

这里使用的是$.ajax去掉用，用.done接收成功的回调。将返回的数据用data接收，将数据格式化为 el-autocomplete 所需的格式，将data.title赋值给title，将data.id变成字符串toString后赋值给id，且将这两个值必须放在对象大括号中赋值给formattedData字段，同时，将formattedData将在数组中括号中传递给cb函数（cb函数是el-autocomplete组建自己封装的，这里不用管）。这里这样操作是为了模拟json数据：

[

    {

          "title": "xxxx",

          "id": "xxxx",

    }

]

当返回值后设置全局的topicStatus为true，然后提示用户已找到该专题。

问:

点击远程搜索输入框后怎样设置不去请求接口数据?

回答:

:trigger-on-focus="false"设置成false后就可以实现点击输入框不调用接口

问:

value-key有什么作用?

回答:

value-key="title"设置成title,远程搜索输入框返回数据后下拉显示的是title文字,

value-key="id"设置成id,远程搜索输入框返回数据后下拉框显示的是id.

问:

原始代码:

<el-form-item prop="topicId" label="专题" :rules="{ required: true, message: '专题不能为空', trigger: 'change' }" >
<el-autocomplete v-model="addDataForm.topicId" :fetch-suggestions="querySearch" placeholder="请输入专题id" :trigger-on-focus="false" value-key="title" ></el-autocomplete>
</el-form-item>

这段代码是可以用的,但是现在输入框输入后有回显是title,选中title后v-model的topicId也获取的是title的文字,我现在希望让v-model的topicId获取的是querySelect接口回调的id怎么写?当我这里的value-key等于id的时候v-model的topicId获取的就是id但同时输入框下拉回显也是id,现在我希望回显是title点击选中后v-model的topicId获取的是id?

回答:

要实现这个需求，你可以在 el-autocomplete 组件中使用 template slot 来自定义选项的展示内容，同时保持 v-model 绑定的值为 id。这样用户在选择专题时会看到 title，但实际上 v-model 中存储的是 id。

下面是一种可能的解决方案：

使用template模板,在这个解决方案中，我们在 el-autocomplete 中添加了一个 template slot，用来自定义选项的展示内容。点击选项时，会调用 handleSelect 方法来处理选中的逻辑:

案例代码:

这样，用户在选择专题时会看到 title，但实际上 v-model 中存储的是 id.

这里的item就是当前选中的数据,我们调用handleSelect将item数据传进去,在输入框回显item.title文本,

将item传进去后尝试过使用this.$nextTick,确保 Vue 已经更新了组件的状态后再提交表单，但是这个方法会导致问题，所以尾门选择不使用this.$nextTick方法。

选择在data中创建一个字典新字段this.recordTopic用来存放item.id的值，将选中的数据的id赋值给recordTopic。所以当我们切换远程搜索输入框中的选项的时候就可以触发handleSelect，将文字展示方法且将对应的id存储在this.recordTopic中。

在后续的点击确定提交编辑表单的时候就将这个this.recordTopic赋值给this.addDataForm.topic就可以了。

实际代码:

问：

当点击编辑按钮编辑当前的row数据的时候，当前是专题数据，请问后端返回的是id为1144的数据，你怎么将它变成对应的title？

回答：

当点击编辑按钮的时候，触发editCurrent事件，判断当前是专题，调用远程搜索输入框的querySearch查询，同时将当前row的topicId的值（现在的例子是1144）作为id传递进去，formattedData回调函数是接口返回的值，我们里面打印了formattedData是下面：

[
    {
        "title": "巡回法庭可期几何"，
        "id": "1111"，
    }
]

所以创建title和id字段存储当前的接口返回值，分别将title赋值给this.addDataForm.topicId和this.recordTopic，这时候远程搜索输入框显示的是this.addDataForm.topicId的值，当我们点击确定保存提交编辑表单的时候，将专题的值改为this.recordTopic就可以了。

editCurrent: function (item) {
        
        // 判断是否存在专题
        if (this.currentItem.topicId) {
          // this.addDataForm.topicId = this.currentItem.topicId.toString(); // 专题
          this.querySearch(this.currentItem.topicId, (formattedData) => {
            console.log('进入了formattedData回调');
            console.log(formattedData, 'formattedData');
            let title = formattedData[0].title;
            let id = formattedData[0].id;
            console.log(title, 'title');
            console.log(id, 'id');
            this.addDataForm.topicId = title; // 将专题输入框显示的暂时列为title文字 ,当点击编辑弹框的确定按钮提交时 再将this.addDataForm.topicId改为id值
            this.recordTopic = id; // 将选中的专题的id存到this.recordTopic中, 当编辑情况下点击确定的时候将专题输入框的this.addDataForm.topic的值从title改为id
            this.topicStatus = true; // 设置专题接口返回是有值的 code = 0
            // this.$message.success('已找到该专题');
          })
        }
        .......
      },

问：

el-table渲染数据的时候，当前是专题，后端返回的是id为1144，我们怎么讲这个值改为对应的title？

回答：

我们通过template模板，判断当前是row有没有topicId来判断当前是不是专题，是专题的话就显示，不是专题显示空。在里面调用topicTitles数据对象，将这一行row的topicId传，要是没有对应的topicId就显示Loading意味着接口还在请求：

在data总定义：

这是请求表格数据的事件，我们在res返回值前面加上async 异步 然后在表格数据请求完后使用await 请求this.fetchTopicTitles接口，获取专题标题：

我们通过async 定义fetchTopicTitles事件，原定于的是使用map去将tableData的当前页面的topicId赋值给topicIds数组，但是后来发现有很多undefined，发现他是将当前页面的每一个元素都便利了，没有topicId的就写成了undefined，于是我们使用filter先过滤没有topicId的item，然后使用map将有topicId的item的topicId放进topicIds。

通过try catch和for循环，将topicIds中的每一个topicId作为接口值，异步请求专题接口，相当于当前页面有多少个专题row，请求多少次专题接口。

当返回值后，使用：this.$set方法，将上文data定义的空对象：this.topicTitles，当前row的topicId的值，和使用专题值请求接口返回的title值传递给this.$set方法。

打印结果：

对应上文，我们通过topicTitles[scope.row.topicId]就可以获取当当前对应的title文字。