vue相关联的下拉选择器

基于element组件实现以下效果：

 

 

 

利用@change事件

实现这部分功能的代码如下：

<el-col :span="6">
          <div
            class="el-input el-input--medium el-input-group el-input-group--prepend"
          >
            <div class="el-input-group__prepend">班组</div>
            <el-select
              v-model="query.search['classId_eq']"
              style="width:100%"
              placeholder="请选择班组" @change="getValue"
            >
              <el-option
                v-for="item in classInfos"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </div>
        </el-col>
        <!--  -->
        <el-col :span="6">
          <div
            class="el-input el-input--medium el-input-group el-input-group--prepend"
          >
            <div class="el-input-group__prepend">小组</div>
            <el-select
              v-model="query.search['groupId_eq']"
              style="width:100%"
              placeholder="请选择小组"
            >
              <el-option
                v-for="item in groups"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </div>
        </el-col>
        <!--  -->

 

export default {
  ................
  data() {
    return {
      ............
      groups: [], //groups随便起名字
      .........
    };
  },
  created() {
    window.this = this;
  },
  methods: {
    .........

        getOption() {
      this.$http.get(this.url + "/optionsData").then(data => {
        if (data.status === 200) {
          this.optionsData = data.content;
          this.classInfos = this.optionsData.classInfos;
          this.query.search["classId_eq"] = this.classInfos[0].id;

          this.getValue();
          this.search();
        }
      });
    },
   .............
    getValue() {
      this.$http
        .get(this.url + "/getGroupInfos", {
          classId: this.query.search["classId_eq"]
        })
        .then(res => {
          if (res.success) {
            this.groups = res.content;
          }
        })
        .catch(res => {});
    }
  }

在我编辑的过程中，想实现以下功能，

以分组的显示分组，未分组的也就是空的默认显示未分组

 

 

 

 所以需要进行值和样式的判断：

            <el-table-column key="2" prop="className" label="所属班组" />
            <el-table-column key="3" prop="groupName" label="所属小组">
              <template slot-scope="scope">
                <span
                  :style="
                    scope.row.groupName == null
                      ? 'color:#f23d3d'
                      : 'color:#606266'
                  "
                  >{{
                    scope.row.groupName ? scope.row.groupName : "未分组"
                  }}</span
                >
              </template>
            </el-table-column>

利用element组件的Table默认值进行判断

 

 

 

 

西安的鬼天气，十一月了不下雪还下雨，虽然周六也上班，但是还是祝自己生日快乐呀

今天也很想他..................................