输入框快速检索

最新推荐文章于 2023-10-20 15:34:14 发布

viceen

最新推荐文章于 2023-10-20 15:34:14 发布

阅读量234

点赞数

分类专栏： vue-评分-前后台文章标签：数据可视化 vue js

本文链接：https://blog.csdn.net/weixin_44867717/article/details/108616364

版权

vue-评分-前后台专栏收录该内容

36 篇文章 1 订阅

订阅专栏

输入框快速检索

图例
在这里插入图片描述

结构

<div>
      <div class="b"></div>
            <div class="c">
              <span class="spa-a">其他选项：</span>
              <span class="spa-b">标题：</span>
              <a-input @change="handleTitleChange" style="width: 280px" placeholder="请输入标题"></a-input>
              <!--
                <a-select @change="handleCreatorChange" style="width: 280px">
                  <a-select-option value="不限">不限</a-select-option>
                  <a-select-option
                    v-for="(item, index) in creator_all"
                    :key="String(item.ldapuser)"
                    :value="String(item.ldapuser)"
                  >{{ item.displayname}}</a-select-option>
                </a-select>
              -->
      </div>
 </div>

数据

data(){
    return{
      // 表格
      columns,
      columns_inter,
      law_list: [],
      law_title: '',
      inter_list: [],
      creator_all: [],
      creator: [],
    }
}

方法

    // 表格
    onChange,
    handleTitleChange(value) {
      this.law_title = value.target.value
      this.$http
        .get('/cms/law/list', {
          module: 'LEGAL_LAW',
          class_id: this.selectedTags,
          title: this.law_title,
        })
        .then(
          (response) => {
            if (response.code !== 200) {
              //this.$message.error(`查询分类失败，原因: ${result.message}`);
              this.law_list = []
            } else {
              let res = response.result
              this.law_list = res.map((item) => {
                //item['key'] = item['id'];
                item['visible'] = false
                return item
              })
            }
          },
          (error) => {
            this.$message.error(`获取分类失败`)
          }
        )
    },

样式

.b {
    border: 1px dotted #e9e9e9;
}
.c {
    margin-top: 16px;
    .spa-a {
        width: 70px;
        height: 22px;
        font-size: 14px;
        // font-family: PingFangSC-Regular, PingFang SC;
        // font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 22px;
    }
    .spa-b {
        width: 42px;
        height: 22px;
        font-size: 14px;
        // font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(85, 85, 85, 1);
        line-height: 22px;
    }
}