组件el-check-tag、el-tag实现点击高亮（多选）

最新推荐文章于 2024-11-02 01:02:19 发布

原创最新推荐文章于 2024-11-02 01:02:19 发布 · 2.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #javascript #css #vue.js

该段代码展示了一个Vue.js组件，用于创建一个多选的薪酬福利列表。用户可以通过el-check-tag组件选择或取消福利选项，选中的项会绑定到form.welfare模型，onChange事件处理函数负责更新state.labelCodeList中的选中值。

 <el-form-item label="薪酬福利" prop="welfare">
          <!-- <el-select v-model="form.welfare" class="m-2" placeholder="请选择薪酬福利" filterable>
            <el-option v-for="item in state.gwflOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select> -->

          <el-check-tag
            class="welfare"
            :class="{active:state.labelCodeList.indexOf(item.value)!=-1}"
            v-model="form.welfare"
            v-for="item in state.gwflOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            @change="onChange(item.value)"

            >{{ item.label }}</el-check-tag
          >
        </el-form-item>

//职位诱惑
const onChange = (val) => {

  if(state.labelCodeList.indexOf(val)!=-1){
    state.labelCodeList.splice(state.labelCodeList.indexOf(val),1)
  }else{
    state.labelCodeList.push(val)
  }
}

关注博主即可阅读全文