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

最新推荐文章于 2024-04-23 16:25:13 发布

ZDM_9999

最新推荐文章于 2024-04-23 16:25:13 发布

阅读量1.9k

点赞数 1

文章标签： elementui javascript css vue.js Powered by 金山文档

本文链接：https://blog.csdn.net/ZDM_9999/article/details/128624833

版权

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

摘要由CSDN通过智能技术生成

 <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)
  }
}