Element UI selection-change 单选效果

最新推荐文章于 2024-05-31 11:32:51 发布
最新推荐文章于 2024-05-31 11:32:51 发布
阅读量1k 收藏
点赞数
分类专栏： Element
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39428080/article/details/114948627
版权 
<template>
  <div>
    <el-dialog custom-class="dialog-content" class="print-content" width="700px" :close-on-click-modal="false" append-to-body :show-close="false" top="0" :visible.sync="isVisible">
      <div slot="title" class="compontent-header">
        <span class="title">{{$t('member.MemberProfile.lang_memberprofile_114')}}</span>
        <i class="iconfont dianadanchuangquxiao close" @click="handleClose"></i>
      </div>
      <div class="logCont">
        <el-form label-width="68px">
          <el-row>
            <el-col :span="8">
              <el-form-item :label="$t('member.MemberProfile.lang_memberprofile_195')" prop="noteGroup">
                <el-select v-model="noteGroup" clearable placeholder="请选择">
                  <el-option v-for="(item,index) in getHotelGroupData" :key="index" :label="item.itemValueName" :value="item.itemValueCode">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('member.MemberProfile.lang_memberprofile_116')" prop="noteType">
                <el-select v-model="noteType" clearable placeholder="请选择">
                  <el-option v-for="(item,index) in getHotelData" :key="index" :label="item.itemValueName" :value="item.itemValueCode">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-checkbox v-model="internal" @change="checkInternal()" style="margin-top:10px;margin-left:30px;">{{$t('member.MemberProfile.lang_memberprofile_117')}}</el-checkbox>
          </el-row>
        </el-form>
      </div>

      <div class="addressButton">
        <el-button size="mini" type="primary" :disabled="showCopy" @click="copyProfile">{{$t('member.MemberProfile.lang_memberprofile_118')}}</el-button>
        <el-button size="mini" type="primary" @click="newProfile">{{$t('member.MemberProfile.lang_memberprofile_91')}}</el-button>
        <el-button size="mini" type="danger" :disabled="showDelete" @click="deleteProfile">{{$t('member.MemberProfile.lang_memberprofile_92')}}</el-button>
        <el-button size="mini" class="searchButton" type="primary" @click="searchProfile">{{$t('member.MemberProfile.lang_memberprofile_104')}}</el-button>
      </div>
      <div>
        <el-table :data="getNotesListData" height="250" ref="selectTable" @row-dblclick="rowDblclick" @selection-change="selectChecked" @change="changeValue" border style="width: 100%">
          <el-table-column type="selection" width="55px"></el-table-column>
          <el-table-column :label="$t('member.MemberProfile.lang_memberprofile_117')">
            <template slot-scope="scope">
              <span v-if="scope.row.internal === true">
                <i slot="suffix" class="el-input__icon el-icon-check addCheckColor"></i>
              </span>
              <span v-else></span>
            </template>
          </el-table-column>
          <el-table-column prop="noteGroupName" :label="$t('member.MemberProfile.lang_memberprofile_195')">
          </el-table-column>
          <el-table-column prop="noteTypeName" :label="$t('member.MemberProfile.lang_memberprofile_116')">
          </el-table-column>
          <el-table-column prop="noteTitle" :label="$t('member.MemberProfile.lang_memberprofile_119')">
          </el-table-column>
        </el-table>
      </div>
      <el-input type="textarea" :rows="8" :placeholder="$t('member.MemberProfile.lang_memberprofile_123')" v-model="getData.note" style="margin-top:10px;">
      </el-input>
      <div class="twoButton">
        <div style="flex:0 150px;">{{$t('member.MemberProfile.lang_memberprofile_120')}}{{getData.createUser}}</div>
        <div style="flex:0 200px;">{{$t('member.MemberProfile.lang_memberprofile_121')}}{{getData.createTime}}</div>
        <div style="flex:0 150px;">{{$t('member.MemberProfile.lang_memberprofile_122')}}{{getData.modifyUser}}</div>
        <div style="flex:0 200px;">{{$t('member.MemberProfile.lang_memberprofile_121')}}{{getData.modifyTime}}</div>
      </div>
    </el-dialog>

    <!-- 新增 -->
    <el-dialog width="700px" style="z-index:9999" custom-class="dialog-content" class="print-content" :close-on-click-modal="false" append-to-body :show-close="false" top="40px" v-if="addDialog" :visible.sync="addDialog">
      <div slot="title" class="compontent-header">
        <span class="title">{{$t('member.MemberProfile.lang_memberprofile_124')}}</span>
        <i class="iconfont dianadanchuangquxiao close" @click="handleClose2"></i>
      </div>
      <div class="logCont">
        <el-form label-width="108px" ref="form" :model="form" :rules="rules">
          <el-row>
            <el-col :span="10">
              <el-form-item :label="$t('member.MemberProfile.lang_memberprofile_195')" prop="noteGroup">
                <el-select v-model="form.noteGroup">
                  <el-option v-for="(item,index) in getHotelGroupData" :key="index" :label="item.itemValueName" :value="item.itemValueCode">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 备注类型 -->
            <el-col :span="10" style="margin-left:25px;">
              <el-form-item :label="$t('member.MemberProfile.lang_memberprofile_116')" prop="noteType">
                <el-select v-model="form.noteType" >
                  <el-option v-for="(item,index) in getHotelData" :key="index" :label="item.itemValueName" :value="item.itemValueCode">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item :label="$t('member.MemberProfile.lang_memberprofile_127')" prop="createTime">
                <el-date-picker v-model="form.createTime" disabled format="yyyy-MM-dd HH:mm" type="date" placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="10" style="margin-top:8px;margin-left:70px;">
              <el-checkbox v-model="checked" disabled>{{$t('member.MemberProfile.lang_memberprofile_117')}}</el-checkbox>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20" style="margin-left:50px">
              <el-radio v-model="radio" label="HOTEL" @change="getRadioValue" style="margin-top:10px;margin-left:30px;">{{$t('member.MemberProfile.lang_memberprofile_135')}}</el-radio>
              <el-radio v-model="radio" label="BRAND" @change="getRadioValue" style="margin-top:10px;margin-left:30px;">{{$t('member.MemberProfile.lang_memberprofile_134')}}</el-radio>
              <el-radio v-model="radio" label="GROUP" @change="getRadioValue" style="margin-top:10px;margin-left:30px;">{{$t('member.MemberProfile.lang_memberprofile_133')}}</el-radio>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="21">
              <el-form-item :label="$t('member.MemberProfile.lang_memberprofile_129')" prop="noteTitle" style="margin-top:10px;">
                <el-input v-model="form.noteTitle"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-input type="textarea" :rows="8" class="textareaCopy" :placeholder="$t('member.MemberProfile.lang_memberprofile_130')" v-model="form.note" style="margin-top:10px;">
          </el-input>
        </el-form>
        <div class="twoButton">
          <el-button size="mini" type="primary" @click="okDialog">{{$t('member.MemberProfile.lang_memberprofile_83')}}</el-button>
          <el-button size="mini" type="danger" @click="handleClose2">{{$t('member.MemberProfile.lang_memberprofile_84')}}</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 编辑 -->
    <el-dialog width="700px" style="z-index:9999" custom-class="dialog-content" class="print-content" :close-on-click-modal="false" append-to-body :show-close="false" top="40px" :visible.sync="editDialog">
      <div slot="title" class="compontent-header">
        <span class="title">{{$t('member.MemberProfile.lang_memberprofile_126')}}</span>
        <i class="iconfont dianadanchuangquxiao close" @click="handleClose3"></i>
      </div>
      <div class="logCont">
        <el-form label-width="108px" ref="form" :model="form" :rules="rules">
          <el-row>
            <el-col :span="10">
              <el-form-item :label="$t('member.MemberProfile.lang_memberprofile_195')" prop="noteGroup">
                <el-select v-model="form.noteGroup">
                  <el-option v-for="(item,index) in getHotelGroupData" :key="index" :label="item.itemValueName" :value="item.itemValueCode">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 备注类型 -->
            <el-col :span="10" style="margin-left:25px;">
              <el-form-item :label="$t('member.MemberProfile.lang_memberprofile_116')" prop="noteType">
                <el-select v-model="form.noteType" placeholder="请选择">
                  <el-option v-for="(item,index) in getHotelData" :key="index" :label="item.itemValueName" :value="item.itemValueCode">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item :label="$t('member.MemberProfile.lang_memberprofile_127')" prop="modifyTime">
                <el-date-picker v-model="form.modifyTime" disabled format="yyyy-MM-dd HH:mm" type="date" placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="10" style="margin-top:8px;margin-left:70px;">
              <el-checkbox v-model="checked" disabled>{{$t('member.MemberProfile.lang_memberprofile_117')}}</el-checkbox>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20" style="margin-left:50px">
              <el-radio v-model="radio" label="HOTEL" @change="getRadioValue" style="margin-top:10px;margin-left:30px;">{{$t('member.MemberProfile.lang_memberprofile_135')}}</el-radio>
              <el-radio v-model="radio" label="BRAND" @change="getRadioValue" style="margin-top:10px;margin-left:30px;">{{$t('member.MemberProfile.lang_memberprofile_134')}}</el-radio>
              <el-radio v-model="radio" label="GROUP" @change="getRadioValue" style="margin-top:10px;margin-left:30px;">{{$t('member.MemberProfile.lang_memberprofile_133')}}</el-radio>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="21">
              <el-form-item :label="$t('member.MemberProfile.lang_memberprofile_129')" prop="noteTitle" style="margin-top:10px;">
                <el-input v-model="form.noteTitle"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-input type="textarea" :rows="8" class="textareaCopy" :placeholder="$t('member.MemberProfile.lang_memberprofile_130')" v-model="form.note" style="margin-top:10px;">
          </el-input>
        </el-form>
        <div class="twoButton">
          <el-button size="mini" type="primary" @click="saveDialog">{{$t('member.MemberProfile.lang_memberprofile_83')}}</el-button>
          <el-button size="mini" type="danger" @click="handleClose3">{{$t('member.MemberProfile.lang_memberprofile_84')}}</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 复制 -->
    <el-dialog width="700px" style="z-index:9999" custom-class="dialog-content" class="print-content" :close-on-click-modal="false" append-to-body :show-close="false" top="40px" v-if="copyDialog" :visible.sync="copyDialog">
      <div slot="title" class="compontent-header">
        <span class="title">{{$t('member.MemberProfile.lang_memberprofile_125')}}</span>
        <i class="iconfont dianadanchuangquxiao close" @click="handleClose4"></i>
      </div>
      <div class="logCont">
        <el-form label-width="108px" ref="form" :model="form" :rules="rules">
          <el-row>
            <el-col :span="10">
              <el-form-item :label="$t('member.MemberProfile.lang_memberprofile_127')" prop="createTime">
                <el-date-picker v-model="form.createTime" disabled format="yyyy-MM-dd HH:mm" type="date" placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <!-- 备注类型 -->
            <el-col :span="10" style="margin-left:25px;">
              <el-form-item :label="$t('member.MemberProfile.lang_memberprofile_116')" prop="noteType">
                <el-select v-model="form.noteType" placeholder="请选择">
                  <el-option v-for="item in getHotelData" :key="item.itemCode" :label="item.itemValueName" :value="item.itemValueCode">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20" style="margin-left:75px;">
              <el-checkbox v-model="checked" disabled>{{$t('member.MemberProfile.lang_memberprofile_117')}}</el-checkbox>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20" style="margin-left:50px">
              <el-radio v-model="radio" label="HOTEL" @change="getRadioValue" style="margin-top:10px;margin-left:30px;">{{$t('member.MemberProfile.lang_memberprofile_135')}}</el-radio>
              <el-radio v-model="radio" label="BRAND" @change="getRadioValue" style="margin-top:10px;margin-left:30px;">{{$t('member.MemberProfile.lang_memberprofile_134')}}</el-radio>
              <el-radio v-model="radio" label="GROUP" @change="getRadioValue" style="margin-top:10px;margin-left:30px;">{{$t('member.MemberProfile.lang_memberprofile_133')}}</el-radio>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="21">
              <el-form-item :label="$t('member.MemberProfile.lang_memberprofile_129')" prop="noteTitle" style="margin-top:10px;">
                <el-input v-model="form.noteTitle"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-input type="textarea" :rows="8" class="textareaCopy" :placeholder="$t('member.MemberProfile.lang_memberprofile_130')" v-model="form.note" style="margin-top:10px;">
          </el-input>
        </el-form>
        <div class="twoButton">
          <el-button size="mini" type="primary" @click="copySaveButton">{{$t('member.MemberProfile.lang_memberprofile_83')}}</el-button>
          <el-button size="mini" type="danger" @click="handleClose4">{{$t('member.MemberProfile.lang_memberprofile_84')}}</el-button>
        </div>
      </div>
    </el-dialog>

  </div>
</template>
<script lang="ts">
import { Vue, Component, Prop, Watch, Emit } from "vue-property-decorator";
import { IDefineNotes } from "@/store/types/member/memberProfileRequest";
import { LangHelper } from "@/utils/i18n";
import { Message } from "element-ui";
import {
  getBrandId,
  getBussList,
  getNotesList,
  notesDelete,
  notesInsert,
  notesUpdate,
  serarchNotesList,
} from "@/api/member";
import { UserModule } from "@/store/modules/user";
import { ElForm } from "element-ui/types/form";
import { format, addDays } from "date-fns";

@Component({
  name: "ProfileNotes",
})
export default class ProfileNotes extends Vue {
  @Prop() private isVisible!: boolean;
  @Prop() private profileData!: any;
  @Prop() private otherGlobalId!: any;
  private profileGlobalId: string = "";
  private showDelete: boolean = true;
  private showCopy: boolean = true;
  @Emit("cancel")
  private cancel() {
    const param = {
      name: "operateNotes",
    };
    return param;
  }
  // 暴露保存事件
  @Emit("saveNotesData")
  private saveNotesData() {
    return this.checkData;
  }
  // 带回profileId
  @Emit("saveglobalId")
  private saveglobalId() {
    return this.profileGlobalId;
  }
  private checkData: [] = []; //勾选数据
  private form = new IDefineNotes();
  // 新增
  private addDialog: boolean = false;
  // 编辑
  private editDialog: boolean = false;
  // copy
  private copyDialog: boolean = false;
  private number: string = "";
  private checked: boolean = true;
  private textarea: string = "";
  private getHotelData: any = [];
  private getHotelGroupData: any = [];
  private getHotelIdData: any = {};
  private getNotesListData: any = [];
  private KeywordType: string = "";
  private Keyword: string = "";
  private note: string = "";
  private radio: string = "";
  private noteGroup: string = "";
  private noteType: string = "";
  private getData: any = {};
  private internal: boolean = true;

  // 必填
  private rules = {
    noteType: [
      {
        required: true,
        message: LangHelper.getMessage(
          "member.MemberProfile.lang_memberprofile_132"
        ),
        trigger: ["change"],
      },
    ],
    noteTitle: [
      {
        required: true,
        message: LangHelper.getMessage(
          "member.MemberProfile.lang_memberprofile_132"
        ),
        trigger: ["change", "blur"],
      },
    ],
  };

  created() {
    let profId = "";
    if (this.profileData === undefined) {
      profId = "";
    } else if (this.otherGlobalId) {
      profId = this.otherGlobalId;
    } else {
      profId = this.profileData.id;
    }
    this.getHotelGroupFunc();
    this.getHotelFunc();
    this.getNotesListFunc(profId);
    this.getBrandIdFunc();
  }

  // 判断酒店/品牌/集团
  getRadioValue(val: any) {
    if (val === "HOTEL") {
      this.form.scopeCode = this.getHotelIdData.hotelId;
      this.form.scopeType = "HOTEL";
    }
    if (val === "BRAND") {
      this.form.scopeCode = this.getHotelIdData.hotelBrand;
      this.form.scopeType = "BRAND";
    }
    if (val === "GROUP") {
      this.form.scopeCode = this.getHotelIdData.fromSrc;
      this.form.scopeType = "GROUP";
    }
  }

  // 备注组
  async getHotelGroupFunc() {
    const param = {
      hotelId: "1",
      itemCode: "NOTE_GROUP",
      isValid:true
    };
    this.getHotelGroupData = await getBussList(param as any);
  }

  // 备注类型 NOTE_TYPE
  async getHotelFunc() {
    const param = {
      hotelId: "1",
      itemCode: "NOTE_TYPE",
      isValid:true
    };
    this.getHotelData = await getBussList(param as any);
  }

  // 获取品牌id
  async getBrandIdFunc() {
    const param = {
      hotelId: UserModule.GetHotelId,
    };
    this.getHotelIdData = await getBrandId(param as any);
  }

  //备注列表
  async getNotesListFunc(id: any) {
    let profId = "";
    if (this.profileData === undefined) {
      profId = "";
    } else if (this.otherGlobalId) {
      profId = this.otherGlobalId;
    } else if (id) {
      profId = id;
    } else {
      profId = this.profileData.id;
    }
    this.getNotesListData = await getNotesList(profId);
  }

  // 取消
  handleClose() {
    this.saveNotesData();
    this.cancel();
  }
  handleClose2() {
    this.addDialog = false;
  }
  handleClose3() {
    this.editDialog = false;
  }
  handleClose4() {
    this.copyDialog = false;
  }
  //  新增
  newProfile() {
    this.form = new IDefineNotes();
    this.addDialog = true;
    this.form.createTime = format(new Date(), "YYYY-MM-DD HH:mm:ss");
  }

  checkInternal() {}
  // 搜索
  async searchProfile() {
    if (this.otherGlobalId) {
      this.profileData.id = this.otherGlobalId;
    }
    this.getNotesListData = await serarchNotesList(
      this.profileData.id,
      this.noteGroup,
      this.noteType,
      this.internal
    );
  }
  //  双击修改
  rowDblclick(row: any) {
    this.form = new IDefineNotes();
    this.form = row;
    this.radio = row.scopeType;
    this.editDialog = true;
  }
  copyProfile() {
    this.form = new IDefineNotes();
    this.form = this.getData;
    this.radio = this.getData.scopeType;
    this.copyDialog = true;
  }
  // 新增
  okDialog() {
    (this.$refs["form"] as ElForm).validate(async (valid) => {
      if (valid) {
        this.form.createTime = format(
          this.form.createTime,
          "YYYY-MM-DD HH:mm:ss"
        );
        let profId = "";
        if (this.profileData != undefined) {
          profId = this.profileData.id;
        }
        if (this.otherGlobalId) {
          profId = this.otherGlobalId;
        }
        this.form.profId = this.profileData.id;
        (this.form.profType = this.profileData.type),
          (this.form.createUser = UserModule.GetName);
        this.form.overwrideInternal = true;
        this.form.internal = true;
        const getAddress = Object.assign(this.form, {
          profId: profId,
        });
        const result = await notesInsert(this.form)
          .then((result) => {
            Message.success(
              LangHelper.getMessage(
                "member.MemberProfile.lang_memberprofile_205"
              ) as string
            );
            this.addDialog = false;
            this.profileGlobalId = result;
            this.saveglobalId();
            this.getNotesListFunc(result); //刷新列表
          })
          .catch((err) => (this.addDialog = false));
      }
    });
  }
  okProfile() {
    this.cancel();
  }
  cancelProfile() {
    this.cancel();
  }
  // 勾选
  selectChecked(val: any) {
    if (val.length === 0) {
      this.showDelete = true;
      this.showCopy = true;
      this.getData = "";
    } else {
      if(val.length > 1 ){
        (this as any).$refs.selectTable.clearSelection();
        (this as any).$refs.selectTable.toggleRowSelection(val[val.length-1],true)
        
      }
      this.checkData = val;
      this.showDelete = false;
      this.showCopy = false;
      this.checkData.forEach((element) => {
        this.getData = element;
      });
    }
  }

  changeValue(){
    this.$forceUpdate();
  }

  // 编辑保存
  saveDialog() {
    (this.$refs["form"] as ElForm).validate(async (valid) => {
      if (valid) {
        this.form.modifyTime = format(
          this.form.modifyTime,
          "YYYY-MM-DD HH:mm:ss"
        );
        this.form.profId = this.profileData.id;
        (this.form.profType = this.profileData.type),
          (this.form.modifyUser = UserModule.GetName);
        this.form.overwrideInternal = true;
        this.form.internal = true;
        const result = await notesUpdate(this.form)
          .then((result) => {
            Message.success(
              LangHelper.getMessage(
                "member.MemberProfile.lang_memberprofile_207"
              ) as string
            );
            this.editDialog = false;
            this.getNotesListFunc(result); //刷新列表
          })
          .catch((err) => (this.editDialog = false));
      }
    });
  }

  // 复制保存
  copySaveButton() {
    (this.$refs["form"] as ElForm).validate(async (valid) => {
      if (valid) {
        this.form.createTime = format(
          this.form.createTime,
          "YYYY-MM-DD HH:mm:ss"
        );
        this.form.profId = this.profileData.id;
        this.form.id = "";
        (this.form.profType = this.profileData.type),
          (this.form.createUser = UserModule.GetName);
        this.form.overwrideInternal = true;
        this.form.internal = true;
        const result = await notesInsert(this.form)
          .then((result) => {
            Message.success(
              LangHelper.getMessage(
                "member.MemberProfile.lang_memberprofile_208"
              ) as string
            );
            this.copyDialog = false;
            this.getNotesListFunc(result); //刷新列表
          })
          .catch((err) => (this.copyDialog = false));
      }
    });
  }

  deleteProfile() {
    const rows = this.checkData;
    (this as any)
      .$confirm(
        `${(this as any).$t("member.MemberProfile.lang_memberprofile_97")}`,
        `${(this as any).$t("member.MemberProfile.lang_memberprofile_96")}`,
        {
          distinguishCancelAndClose: true,
          cancelButtonText: `${(this as any).$t(
            "order.SingleRmInfo.lang_singlerminfo_73"
          )}`,
          confirmButtonText: `${(this as any).$t(
            "order.SingleRmInfo.lang_singlerminfo_72"
          )}`,
        }
      )
      .then(async () => {
        const ids = [];
        for (let i = 0; i < rows.length; i++) {
          ids.push((rows[i] as any).id);
        }
        const deleteContent = await notesDelete(ids);
        (this as any).$message({
          type: "success",
          message: LangHelper.getMessage("order.SingleRmInfo.lang_131"),
        });
        let profId = "";
        if (this.profileData === undefined) {
          profId = "";
        } else if (this.otherGlobalId) {
          profId = this.otherGlobalId;
        } else {
          profId = this.profileData.id;
        }
        this.getNotesListFunc(profId); //刷新列表
      })
      .catch((action: any) => {});
  }
}
</script>
<style lang="less" scoped>
.print-content {
  display: flex;
  justify-content: center;
  align-items: center;
}
fieldset {
  padding: 10px;
  margin: 10px 20px;
  color: #0fbdd6;
  border: #000 dashed 1px;
}
.border-input {
  width: 113%;
}
.addressButton {
  display: flex;
  margin: 0 0 10px 0;
}
.twoButton {
  display: flex;
  justify-content: center;
  align-content: center;
  margin-top: 10px;
}
/deep/ .el-input-group__append {
  border-right: 1px solid #dcdcdc;
}
.cl {
  clear: both;
}
.searchButton {
  float: right;
  right: 10px;
  position: absolute;
}
/deep/ .textareaCopy {
  width: 76%;
  margin-left: 80px;
}
/deep/ .addCheckColor {
  color: green;
  font-weight: bold;
  margin-left: 40%;
}
/deep/ thead {
    .el-table-column--selection {
      .cell {
        display: none;
      }
    }
  }
</style>

 

gaolei_eit
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element-ui-2.15.6.zip
02-23
在给定的 "element-ui-2.15.6.zip" 文件中，我们可以找到构建和运行 Element UI 应用程序所需的所有资源。 1. **版本信息**：文件名 "element-ui-2.15.6" 表明这是 Element UI 的 2.15.6 版本。每个版本都可能包含...
el-table组件多选实现单选功能
m0_49969710的博客
11-29 4397
在使用 el-table组件时为了实现仅能选中表格中的一条数据可将el-table组件多选功能进行改造，从而实现单选功能。
elementUI用 table多选 实现单选
深渊那支花的博客
02-17 2393
2. 利用table 的selection-change 事件实现单选。这是elementui的表格多选。
【记录43】el-table @selection-change 数据回显、条件约束、历史回显清除
最新发布
~牧马~
05-31 584
表格中选中的人员，点击取消后，再次进来人员还在，部分可能觉得正常，实际是不对（切换了数据绑定对象，还存在是不对的）。这里笔者做了一个点击取消就默认为当前选择的取消（不要了）限制选中人员上限，大家可能会想到直接判断选中的list，实际操作中存在一个问题：你选择了，给了提示，表格显示上还是会选中。在其他地方设置好人员，到对应的页面直接在表格中复选设置好的人员。到这里基本完成了回显功能。
el-table自带多选变单选
qq_52702899的博客
05-26 572
<el-table :data="dialogData" ref="MainTable" @selection-change="handleSelectionChange" style="width: 100%" border > <el-table-column type="selection" width="55"
el-tab用户实现单选多选功能（@row-click，@selection-change）以及取消选中
极客鼠之家
08-18 4103
1、效果图 1.1、默认选中效果 1.2、单选，多选，全选效果 2、实现代码 <template> <el-table :data="tableData3" ref="multipleTable" @row-click="handleCurrentChange" @selection-change="selsChange" > <el-table-column type="selection" width="55">&l
el-table的type=“selection“实现单选
weixin_45880538的博客
04-25 1130
利用监听table的selection-change方法， 代码如下。
基于element-ui单选按钮插件特效代码
03-22
在本文中，我们将深入探讨基于Element-UI的单选按钮插件，这是一款适用于Vue.js项目的美化组件。Element-UI是一套为开发者、设计师和产品经理准备的基于Vue2.0的组件库，它提供了丰富的界面元素，使得开发过程更加...
element-ui-helper
04-19
Element-UI-Helper是Element-UI的VS Code扩展。 Element-UI是一个很棒的库。 越来越多的项目使用它。 因此，为了帮助开发人员通过Element-UI编写更高效的代码，诞生了Element-UI-Helper。这不是一个官方项目，但是...
element-ui-2.13.2版本
10-23
在下载的 `element-ui` 压缩包中，你将找到所有必要的资源文件，包括 CSS、JS、图片、字体文件等，它们是 Element UI 正常工作所必需的。安装时，通常将这些文件部署到你的项目公共资源目录中，并在 HTML 文件中引入...
element-ui.rar element-ui核心库压缩包
12-20
这个“element-ui.rar”压缩包包含了 Element UI 的核心库，是开发人员快速搭建企业级 Web 应用的重要工具。 Element UI 的设计理念是简洁、易用，它的组件设计遵循 Material Design 规范，同时考虑到国内用户的...
利用el-table的selection多选框实现单选的效果
热门推荐
爱代码的小海的博客
11-09 1万+
需求场景： 最近在做的一个项目中有个需求，利用Element-UI组件中的el-table实现选择功能，官方提供了两种选择方式，一种是单选，一种是多选。我需要实现单选的效果，但是用过那个单选模式的都知道用户体验不是太好，不熟悉的人都不知道什么是选中状态，所以只能用多选模式来改。 实现方案： 第一步：监听checkbox 的点击事件（选中和取消选中） <el-table :data="tableList.records" ref="myTable"
html+单选+回显,VUE+elementUI表格多选框实现单选以及数据回显时toggleRowSelection失效问题...
weixin_66902855的博客
08-12 3261
toggleRowSelection这个函数需要传某行数据，true表示勾选，false表示不勾选，@selection-change默认是勾选的，也就是说这个事件传进来被选中的数据如果你还是想勾选，那么不需要任何操作，除非你想不勾选，那么就把那条数据用false来去掉勾选。selectItem这个函数我自定义了，一旦勾选多于一行数据，就把上一个勾选去掉，保留最后一个勾选，用过滤器来过滤，把新的(只有一行数据)的数组赋给自定义的数组，方便调用。...
表格列表中，单选、多选以及点击该行数据友好体验的封装
attach_uzi的博客
04-24 404
如图： 点击该行，然后前面的复选框自动勾选，再次点击，复选框取消，点击复选框也可以操作，单选多选都可以。 先了解一下用到的方法：点击该行的方法@row-click，点击复选框的方法，@select @row-click的参数，row，column，$e，第一个参数是该行数据对象 @select的参数有两个 selection，row 第一个是目前选中的数组，第二个是当前选中的数据对象 不知道的可以打印一下。 <el-table ref="singleTable" v-load
表格常用方法(事件)的封装--单选/多选
⭐
11-09 853
基于el-table二次封装表格的完善----单选/多选
【学习总结】element-ui的@selection-change
有问题可关注公众号：前端研究院 后台输入问题回复
10-27 1301
<template> <el-table ref="multipleTable" :data="tableData3" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"> <.
Vue 实现el-table多选样式 变为单选效果
qq_41580802的博客
10-15 2556
我最近在我的 项目开发中遇到一个需要将el-table复选框变单选的需求，同时单选某一行会异步调用接口，请求后台数据；我解决问题之后，觉得还是把这些改进写清楚，方便 Vue的初学者。
element ui @selection-change多选对数据的操作
m0_49471668的博客
09-06 3701
<template> <div> <el-row class="top-block padding-20px" :gutter="40"> <el-col :xs="24" :sm="12" :lg="6"> <el-row type="flex" class="row-bg" justify=""> <el-col :xs="6" :sm="6" :lg="6" class="f.
【avue-crud】---- 实现表格的单选
止于至善
01-24 1191
avue-crudref="crud"方案一选择构建一个单选属性，然后使用该属性的插槽，来使用 input 事件实现单选，好处是样式符合单选，实现方法直接保存当前选中的值，不用做其他处理，缺点是修改地方比较多；方案二优点是只有配置一个 selection 属性，然后处理 selection-change 事件的逻辑就好；缺点就是需要熟悉文档，查找对应的方法进行处理，样式上也不能看出是单选；
element ui 表格多选改单选
09-23
element ui 表格多选改单选的实现方法如下： 在HTML代码中，将el-table的selection-change事件绑定到selectRow方法上，同时在el-table上添加ref属性，以便在JS代码中引用。然后，在JS代码中定义selectRow方法，当选择变化时，判断选择的数量，如果大于1，则清除之前的选择，并选中当前选择的最后一条记录。 具体的实现代码如下： HTML： <el-table ref="selectTable" :data="tableData" class="more_btn" v-loading="loading" element-loading-text="拼命加载中，请稍候......" border @selection-change="selectRow" @select="selectCur"></el-table> JS： // 选择变化时 selectRow(val) { if (val.length > 1) { this.$refs.selectTable.clearSelection() this.$refs.selectTable.toggleRowSelection(val.pop()) } },
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值