vue------分类下拉列表获取链接内容-------链接的文章在数据库中不存在id

实现功能:在数据库中没有定义分类的字段,实现点击分类获取链接功能

数据表

后端

定义获取文章的方法

vue

通过分类获取对应内容,由于分类的字段在数据库中不存在这边定义为artid

  <el-form-item label="分类">
          <el-select
            v-model="query.artid"
            placeholder="请选择"
            @change="selSel()"
            clearable
            filterable
          >
            <el-option
              v-for="item in artList"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

 在对话框中分类的调用,使用chage调用来选择文章加载链接的方法(artSelect)

  <el-form-item prop="artid" label="文章关联">
          <el-select
            placeholder="请选择关联文章"
            v-model="form.artid"
            style="width:100%;"
            clearable
            filterable
            @change="artSelect"
          >
            <el-option v-for="item in artList" :key="item.id" :label="item.title" :value="item.id"></el-option>
          </el-select>
        </el-form-item>

 在data中定义文章在载的列表artList

定义方法获取文章内容

在created中将获得文章内容的方法加进去getArtList

在最后加入点击文章获取链接的方法,将方法放到对话框中,最后统一的将结果传入给备注和链接

    //文章选择结果
    artSelect(e) {
      var _this = this;
      var artid = e;
      var artList = this.artList;
      var thisItem = null;
      for (var i = 0; i < artList.length; i++) {
        var item = artList[i];
        if (item.id == artid) {
          thisItem = item;
          break;
        }
      }
      this.form.linkUrl = "/pages/art/helpdetail/helpdetail?id=" + artid;
      this.form.summary = item.title;
    }
  }

 

posted on 2023-03-30 13:39  昨夜小楼听风雨  阅读(12)  评论(0编辑  收藏  举报