element el-select+el-checkbox多选实现二级联动单个选项禁用效果以及选中选项对应表头高亮:header-cell-style（中级）

2023.1.14我学习了如何使用element里面的el-select+el-checkbox多选框来进行一个下拉框的二级联动，并且可以实现禁用对应的el-option数据，然后就是下拉框选中对应数据可以实现表头高亮效果。

效果如：

全选下拉框：

 二级联动：

 单独禁用效果：

 选中选项表头高亮：

 一、实现多选框+下拉框

html代码如下：

 <el-form-item label="外挂字典" prop="version" width="500px">
//multiple设置多选
//collapse-tags实现多个标签折叠
//selectValues为[]
        <el-select
          v-model="selectValues" multiple @change="select_collection(selectValues)" collapse-tags
        >
//isSelectAll默认为false
          <!--设置全选的效果-->
          <el-checkbox v-model="isSelectAll" style="padding-left: 18px" @change="selectAll_collection">全选
          </el-checkbox>
//already_select_collection为[]
//:value可以传多个参数
          <el-option
            style="text-align: center"
            v-for="item in already_select_collection"
            :key="item.id"
            :label="item.name"
            :value="{
              value:item.col_remark_name,
              tb_code:item.tb_code,
              version:item.version,
              name:item.name,
            }"
          >
          </el-option>
        </el-select>
      </el-form-item>
//selectMapping为[]
      <el-form-item label="外挂字段" prop="version" width="500px">
        <el-select
          v-model="selectMapping" @change="select_mapping(selectMapping)" collapse-tags multiple
        >
          <!--设置全选的效果-->
          <el-checkbox v-model="isSelectAll_mapping" style="padding-left: 18px" @change="selectAll_mapping">全选
          </el-checkbox>
//:disabled="item.disabled"设置禁用（后面讲禁用的时候再使用，这边不用在data设置false）
//already_select_mapping为[]
          <el-option
            :disabled="item.disabled"
            style="text-align: center"
            v-for="item in already_select_mapping"
            :key="item.id"
            :label="item.remark_name"
            :value="item.remark_name"
          ></el-option>
        </el-select>

      </el-form-item>

js代码如下：

表名的全选按钮：

// 实现外挂字典下拉框全选按钮的方法
    selectAll_collection(val) {
// this.selectValues = [] el-select绑定数组
      this.selectValues = []
//如果正确
      if (this.isSelectAll) {
//遍历el-option的数组（数据从后端取得）
        this.already_select_collection.map((item) => {
          this.selectValues.push(item.col_remark_name)
        })
        this.$message({
          message: '已全选',
          type: 'success'
        })
      } else {
        this.selectValues = []
        this.$message.error('已取消全选')
      }
    },

el-select的@change事件：

// 实现外挂字典下拉框的方法
    select_collection(val) {
//如果长度相等是全选
      if (val.length === this.already_select_collection.length) {
        this.isSelectAll = true
      } else {
        this.isSelectAll = false
      }



（主要是上面这部分）




      // 拿到外挂字典下拉框的对应数据实现高亮效果
      this.select_data = val
      let tb_code = ''
      let version = ''
      let name = ''
      // 拿到对应的version、tb_code、name
      for (let i = 0; i < this.select_data.length; i++) {
        tb_code = (this.select_data[i].tb_code)
        version = (this.select_data[i].version)
        name = (this.select_data[i].name)
      }
      this.queryParams.version = version
      this.queryParams.name = name
      if (val.length != 0) {
        // 连接外挂字段的接口
        listData(this.queryParams, tb_code).then(res => {
          this.already_select_mapping = res.data.columns
          // 设置列表的禁用
          this.already_select_mapping.forEach(v => {
            v.disabled = false
          })
          for (let i = 0; i < this.already_select_mapping.length; i++) {
            if (this.already_select_mapping[i].remark_name == '外挂字典映射字段') {
              this.already_select_mapping[0].remark_name = '主键'
              this.already_select_mapping[0].disabled = true
            }
          }
        })
      } 
    },

效果：

二、实现第一个下拉框和第二个下拉框的二级联动

html代码还是（一、实现多选框+下拉框）这部分

js代码如下：

 // 实现外挂字典下拉框的方法
    select_collection(val) {
      if (val.length === this.already_select_collection.length) {
        this.isSelectAll = true
      } else {
        this.isSelectAll = false
      }
      // 拿到外挂字典下拉框的对应数据实现高亮效果
      this.select_data = val



（主要是下面这部分）

      let tb_code = ''
      let version = ''
      let name = ''
      // 拿到对应的version、tb_code、name
      for (let i = 0; i < this.select_data.length; i++) {
        tb_code = (this.select_data[i].tb_code)
        version = (this.select_data[i].version)
        name = (this.select_data[i].name)
      }
      this.queryParams.version = version
      this.queryParams.name = name
      if (val.length != 0) {
        // 连接外挂字段的接口
        listData(this.queryParams, tb_code).then(res => {
          this.already_select_mapping = res.data.columns
          // 设置列表的禁用
          this.already_select_mapping.forEach(v => {
            v.disabled = false
          })
          for (let i = 0; i < this.already_select_mapping.length; i++) {
            if (this.already_select_mapping[i].remark_name == '外挂字典映射字段') {
              this.already_select_mapping[0].remark_name = '主键'
              this.already_select_mapping[0].disabled = true
            }
          }
        })
      } 
    },

 效果如：

 

 三、实现单独选项禁用效果

html代码如下：和一、二的一样，主要是 :disabled="item.disabled"，注意不需要在data设置true/false

 <!--设置全选的效果-->
          <el-checkbox v-model="isSelectAll_mapping" style="padding-left: 18px" @change="selectAll_mapping">全选
          </el-checkbox>
          <el-option
            :disabled="item.disabled"
            style="text-align: center"
            v-for="item in already_select_mapping"
            :key="item.id"
            :label="item.remark_name"
            :value="item.remark_name"
          ></el-option>
        </el-select>

js代码如下：

//这个是第一个下拉框的数组，然后forEach可以把需要的属性放进去
this.already_select_mapping.forEach(v => {
            v.disabled = false
          })

//for循环拿到对应的属性，改变它的值
 for (let i = 0; i < this.already_select_mapping.length; i++) {
            if (this.already_select_mapping[i].remark_name == '外挂字典映射字段') {
              this.already_select_mapping[0].remark_name = '主键'
              this.already_select_mapping[0].disabled = true
            }
          }

效果如：

四、实现下拉框选中选项对应的表头高亮 

html代码如下：

//在el-table中加入  
:header-cell-style="column_height_light"

js代码如下：

// 实现高亮的效果
    column_height_light(row) {
      // 多选但不全选
      if (this.select_data.length != 0) {
        for (let i = 0; i < this.select_data.length; i++) {
//row.column.label可以拿到全部表头的名字
          if (row.column.label == this.select_data[i].value) {
            return { background: '#f58798' }
          }
        }
      } else {
        // 全选
        for (let j = 0; j < this.selectValues.length; j++) {
          if (row.column.label == this.selectValues[j]) {
            return { background: '#f58798' }
          }
        }
      }
    },

对应的下拉框@change事件js代码如下：

 // 实现外挂字典下拉框的方法
    select_collection(val) {
      if (val.length === this.already_select_collection.length) {
        this.isSelectAll = true
      } else {
        this.isSelectAll = false
      }



      // 拿到外挂字典下拉框的对应数据实现高亮效果
      this.select_data = val
      
（主要是中间这段）




      let tb_code = ''
      let version = ''
      let name = ''
      // 拿到对应的version、tb_code、name
      for (let i = 0; i < this.select_data.length; i++) {
        tb_code = (this.select_data[i].tb_code)
        version = (this.select_data[i].version)
        name = (this.select_data[i].name)
      }
      this.queryParams.version = version
      this.queryParams.name = name
      if (val.length != 0) {
        // 连接外挂字段的接口
        listData(this.queryParams, tb_code).then(res => {
          this.already_select_mapping = res.data.columns
          // 设置列表的禁用
          this.already_select_mapping.forEach(v => {
            v.disabled = false
          })
          for (let i = 0; i < this.already_select_mapping.length; i++) {
            if (this.already_select_mapping[i].remark_name == '外挂字典映射字段') {
              this.already_select_mapping[0].remark_name = '主键'
              this.already_select_mapping[0].disabled = true
            }
          }
        })
      }
    },

效果如：

 

 有不懂的地方欢迎来提问。