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默認值進行判斷

 

 

 

 

西安的鬼天氣，十一月了不下雪還下雨，雖然周六也上班，但是還是祝自己生日快樂呀

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