精华内容
下载资源
问答
  • 2021-11-02 18:41:11

    《HTML》部分

    <div class="demo-image">

    <div

    class="block"

    style="width: 24%; height: 24%"

    @click="changeIndex(index)"

    v-for="(item, index) in urls"

    :key="index"

    :class="{

    newchecked: currentIndex === index || currentArr.includes(index),

    }"

    @contextmenu="openMenu"

    ref="detailimg"

    >

    <el-image

    style="width: 100%; height: 100%"

    :src="item"

    fit="fill"

    @click.meta="changeMulti(index)"

    ></el-image>

    </div>

    《js部分》-data数据

    urls: [

    'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',

    'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',

    'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',

    'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',

    ],

    currentIndex: 0, // 现在选中的图片

    isshift: false, // 快捷键 shift 是否被按下

    isctrl: false, // 快捷键 ctrl 是否被按下

    currentArr: [], // 上方div图切是否被多选中,如果多选了就把他的id放到这个列表里面

    《js部分》-methods里方法(监听键盘的方法,keyevent这是重点=》有组合键盘和单个键盘模式,changeMulti兼容mac键盘的command配合点击可多选,全选是control+a)

    keyevent() {

    var that = this;

    let code = 0;

    let code2 = 0;

    document.onkeydown = function(e) {

    let evn = e || event;

    let key = evn.keyCode || evn.which || evn.charCode;

    if (key === 16) {

    that.isshift = true;

    code = 1;

    }

    if (key === 17) {

    that.isctrl = true;

    code = 1;

    }

    if (key === 27) {

    that.nochecked();

    }

    if (key === 65) {

    code2 = 1;

    e.preventDefault(); // 阻止浏览器默认的全选行为

    }

    if (code === 1 && code2 === 1) {

    that.checkAll();

    //do something

    code = 0;

    code2 = 0;

    }

    };

    document.onkeyup = function(e) {

    if (e.keyCode === 17) {

    code = 0;

    }

    if (e.keyCode === 13) {

    code2 = 0;

    }

    };

    // 无组合键盘模式

    // document.onkeydown = function(e) {

    // //按下键盘

    // switch (e.keyCode) {

    // case 16:

    // that.isshift = true;

    // break;

    // case 17:

    // that.isctrl = true;

    // break;

    // case 27:

    // that.nochecked(); // esc 取消选选项

    // break;

    // // case 17 && 65:

    // // that.checkAll(); // ctrl + a 全选功能

    // // break;

    // }

    // if (e.keyCode === 16) {

    // console.log('同事按下了');

    // }

    // };

    // document.onkeyup = function(e) {

    // //放弃键盘

    // switch (e.keyCode) {

    // case 16:

    // that.isshift = false;

    // break;

    // case 17:

    // that.isctrl = false;

    // break;

    // }

    // };

    },

    // 单个选中的文件夹

    changeIndex(item) {

    this.currentIndex = item;

    this.contextMenuVisible = false;

    if (this.isctrl) {

    this.currentArr.push(item);

    }

    if (this.isshift) {

    this.currentArr.push(item);

    console.log(this.currentArr, '数组里的内容');

    }

    },

    // mac键盘选择多个情况

    changeMulti(item) {

    this.currentArr.push(item);

    },

    checkAll() {

    console.log('全选了');

    this.urls.forEach((item, index) => {

    this.currentArr.push(index);

    });

    },

    nochecked() {

    this.currentIndex = 0;

    this.currentArr = [];

    },

    《js部分》-created(进入页面直接执行监听键盘的函数)

    created() {

    this.keyevent();

    // this.currentArr.push(this.currentIndex);

    },

    更多相关内容
  • 项目是antd+react的,其中有一个月份选择器要求可以多选月份,这要怎么弄? 报表周期' name='time'> <DatePicker picker="month" /> Form.Item> 就是说可能同时选择 2022-02,2021-12这种不同的月份
  • 安卓图片多选

    2017-04-28 17:16:20
    安卓图片多选
  • } } </style> 图片上传(多选) <template> <div class="column"> <draggable class="row_wrap" v-if="value" @update="dragEvent" animation="300" draggable=".draggable-item"> (item,index) in imageList" :key...

    图片上传(单选)

    <template>
      <div class="column">
        <div class="row_wrap" v-if="value">
          <div class="upload-image mr15 mb15">
            <el-image :src="value" fit="cover" :preview-src-list="srcList" :class="[isSquare?'square-image':'rectangle-image']"/>
            <li class="el-icon-delete" @click.stop="removeImage"></li>
          </div>
        </div>
        <el-upload
        :action="uploadImgUrl"
        :on-success="handleUploadSuccess"
        :before-upload="handleBeforeUpload"
        :on-error="handleUploadError"
        name="file"
        :show-file-list="false"
        :headers="headers">
          <el-button type="primary" size="small" icon="el-icon-upload">上传图片</el-button>
        </el-upload>
      </div>
    </template>
    
    <script>
    import { getToken, getTenantId } from "@/utils/auth";
    
    export default {
      name:"image-upload",
      data() {
        return {
          uploadImgUrl: process.env.VUE_APP_BASE_API + "/file/upload", // 上传的图片服务器地址
          headers: {
            Authorization: "Bearer " + getToken(),
            'tenantid': getTenantId(),
            'waterMark':0,
          },
          srcList:[]
        };
      },
      props: {
        value: {
          type: String,
          default: "",
        },
        isSquare:{
          type: Boolean,
          default: false,
        },
        waterMark:{
          type: Number,
          default: 0,
        }
      },
      watch:{
        value(newVal,oldVal){
          this.srcList[0] = this.value;
        },
        waterMark(newVal,oldVal){
          this.headers.waterMark = newVal;
        }
      },
      methods: {
        removeImage() {
          this.$confirm('该操作将会删除图片, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.srcList = [];
            this.$emit("input", "");
          });
        },
        handleUploadSuccess(res) {
          if (res.code != 200) {
            this.$message({
              type: "error",
              message: res.msg,
            });
          } else {
            this.srcList[0] = res.data.url;
            this.$emit("input", res.data.url);
            this.$emit("uploadSuccess", res.data.url);
          }
          this.loading.close();
        },
        handleBeforeUpload() {
          this.loading = this.$loading({
            lock: true,
            text: "上传中",
            background: "rgba(0, 0, 0, 0.7)",
          });
        },
        handleUploadError() {
          this.$message({
            type: "error",
            message: "上传失败",
          });
          this.loading.close();
        },
      }
    };
    </script>
    
    <style lang="scss">
    .square-image{
      width: 160px;
      height: 160px;
    }
    .rectangle-image{
      width: 160px;
      height: auto;
    }
    
    .upload-image{
      position: relative;
      img{
        border: 1px solid #efefef;
        border-radius: 5px;
      }
      li{
        position: absolute;
        padding: 4px;
        top: 0px;
        right: 0px;
        font-size: 19px;
        border-top-right-radius: 5px;
        border-bottom-left-radius: 5px;
        color:#999;
        background-color: #fafafa;
        cursor: pointer;
      }
    }
    
    </style>
    

    图片上传(多选)

    <template>
      <div class="column">
        <draggable class="row_wrap" v-if="value" @update="dragEvent" animation="300" draggable=".draggable-item">
          <div v-for="(item,index) in imageList" :key="index" class="draggable-item upload-image mr15 mb15">
            <el-image :src="item" :preview-src-list="imageList" fit="cover" :class="[isSquare?'square-image':'rectangle-image']"></el-image>
            <li class="el-icon-delete" @click.stop="removeImage(index)"></li>
          </div>
        </draggable>
        <el-upload :action="uploadImgUrl" :on-success="handleUploadSuccess" :before-upload="handleBeforeUpload" :on-error="handleUploadError" name="file" :show-file-list="false" :headers="headers" :multiple="true" :limit="limit" v-if="imageList.length < limit">
          <el-button type="primary" size="small" icon="el-icon-upload">上传图片</el-button>
        </el-upload>
        <span class="font-xs text-grey">不超过{{limit}}</span>
      </div>
    </template>
    
    <script>
    import { getToken, getTenantId } from "@/utils/auth";
    import draggable from "vuedraggable"
    export default {
      components: {
        draggable
      },
      data() {
        return {
          uploadImgUrl: process.env.VUE_APP_BASE_API + "/file/upload", // 上传的图片服务器地址
          headers: {
            Authorization: "Bearer " + getToken(),
            'tenantid': getTenantId(),
            'waterMark': 0,
          },
          imageList: []
        };
      },
      props: {
        value: {
          type: Array,
          default: () => [],
        },
        limit: {
          type: Number,
          default: 20,
        },
        isSquare: {
          type: Boolean,
          default: true,
        },
        waterMark: {
          type: Number,
          default: 0,
        }
      },
      methods: {
        // 图片拖动事件
        dragEvent(item) {
          let oldIndexImg = this.imageList[item.oldDraggableIndex] //拖动的当前的图片
          let navIndexImg = this.imageList[item.newDraggableIndex] //被换位子的图片
          // 位置替换
          this.imageList[item.oldDraggableIndex] = navIndexImg;
          this.imageList[item.newDraggableIndex] = oldIndexImg;
        },
        removeImage(i) {
          this.imageList.splice(i, 1);
          this.$emit("input", this.imageList);
        },
        handleUploadSuccess(res) {
          if (res.code != 200) {
            this.$message({
              type: "error",
              message: res.msg,
            });
          } else {
            this.imageList.push(res.data.url);
            this.$emit("input", this.imageList);
            this.$emit("uploadSuccess", this.imageList);
          }
          this.loading.close();
        },
        handleBeforeUpload() {
          this.loading = this.$loading({
            lock: true,
            text: "上传中",
            background: "rgba(0, 0, 0, 0.7)",
          });
        },
        handleUploadError() {
          this.$message({
            type: "error",
            message: "上传失败",
          });
          this.loading.close();
        },
      },
      watch: {
        value(newVal, oldVal) {
          this.imageList = newVal;
        },
        waterMark(newVal, oldVal) {
          this.headers.waterMark = newVal;
        }
      },
    };
    </script>
    
    <style scoped lang="scss">
    .square-image {
      width: 160px;
      height: 160px;
    }
    .rectangle-image {
      width: 160px;
      height: auto;
    }
    
    .upload-image {
      position: relative;
      img {
        border: 1px solid #efefef;
        border-radius: 5px;
      }
      li {
        position: absolute;
        padding: 4px;
        top: 0px;
        right: 0px;
        font-size: 19px;
        border-top-right-radius: 5px;
        border-bottom-left-radius: 5px;
        color: #999;
        background-color: #fafafa;
        cursor: pointer;
      }
    }
    .draggable-item {
      background: transparent !important;
    }
    </style>
    
    

    文件上传(单选)

     <template>
      <div class="upload-file">
        <el-upload :action="uploadFileUrl" :before-upload="handleBeforeUpload" :file-list="fileList" :limit="1" :on-error="handleUploadError" :on-exceed="handleExceed" :on-success="handleUploadSuccess" :show-file-list="false" :headers="headers" class="upload-file-uploader" ref="upload">
          <!-- 上传按钮 -->
          <el-button size="mini" type="primary">选取文件</el-button>
          <!-- 上传提示 -->
          <div class="el-upload__tip" slot="tip" v-if="showTip">
            请上传
            <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
            <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
            的文件
          </div>
        </el-upload>
    
        <!-- 文件列表 -->
        <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
          <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in list">
            <el-link :href="file.url" :underline="false" target="_blank">
              <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
            </el-link>
            <div class="ele-upload-list__item-content-action">
              <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
            </div>
          </li>
        </transition-group>
      </div>
    </template>
    
    <script>
    import { getToken, getTenantId } from "@/utils/auth";
    
    export default {
      props: {
        // 值
        value: [String, Object, Array],
        // 大小限制(MB)
        fileSize: {
          type: Number,
          default: 5,
        },
        // 文件类型, 例如['png', 'jpg', 'jpeg']
        fileType: {
          type: Array,
          default: () => ["doc", "xls", "ppt", "txt", "pdf"],
        },
        // 是否显示提示
        isShowTip: {
          type: Boolean,
          default: true
        }
      },
      data() {
        return {
          uploadFileUrl: process.env.VUE_APP_BASE_API + "/file/uploadDocument", // 上传的图片服务器地址
          headers: {
            Authorization: "Bearer " + getToken(),
            'tenantid': getTenantId()
          },
          fileList: [],
        };
      },
      computed: {
        // 是否显示提示
        showTip() {
          return this.isShowTip && (this.fileType || this.fileSize);
        },
        // 列表
        list() {
          let temp = 1;
          if (this.value) {
            // 首先将值转为数组
            const list = Array.isArray(this.value) ? this.value : [this.value];
            // 然后将数组转为对象数组
            return list.map((item) => {
              if (typeof item === "string") {
                item = { name: item, url: item };
              }
              item.uid = item.uid || new Date().getTime() + temp++;
              return item;
            });
          } else {
            this.fileList = [];
            return [];
          }
        },
      },
      methods: {
        // 上传前校检格式和大小
        handleBeforeUpload(file) {
          // 校检文件类型
          if (this.fileType) {
            let fileExtension = "";
            if (file.name.lastIndexOf(".") > -1) {
              fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
            }
            const isTypeOk = this.fileType.some((type) => {
              if (file.type.indexOf(type) > -1) return true;
              if (fileExtension && fileExtension.indexOf(type) > -1) return true;
              return false;
            });
            if (!isTypeOk) {
              this.$message.error(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
              return false;
            }
          }
          // 校检文件大小
          if (this.fileSize) {
            const isLt = file.size / 1024 / 1024 < this.fileSize;
            if (!isLt) {
              this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
              return false;
            }
          }
          return true;
        },
        // 文件个数超出
        handleExceed() {
          this.$message.error(`只允许上传单个文件`);
        },
        // 上传失败
        handleUploadError(err) {
          this.$message.error("上传失败, 请重试");
        },
        // 上传成功回调
        handleUploadSuccess(res, file) {
          this.$message.success("上传成功");
          this.$emit("input", res.data.url);
        },
        // 删除文件
        handleDelete(index) {
          this.fileList.splice(index, 1);
          this.$emit("input", '');
        },
        // 获取文件名称
        getFileName(name) {
          if (name.lastIndexOf("/") > -1) {
            return name.slice(name.lastIndexOf("/") + 1).toLowerCase();
          } else {
            return "";
          }
        }
      },
    };
    </script>
    
    <style scoped lang="scss">
    .upload-file-uploader {
      margin-bottom: 5px;
    }
    .upload-file-list .el-upload-list__item {
      border: 1px solid #e4e7ed;
      line-height: 2;
      margin-bottom: 10px;
      position: relative;
    }
    .upload-file-list .ele-upload-list__item-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: inherit;
    }
    .ele-upload-list__item-content-action .el-link {
      margin-right: 10px;
    }
    </style>
    

    文件上传(多选)

     <template>
      <div class="upload-file">
        <!-- 文件列表 -->
        <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
          <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in list">
            <el-link :href="file.url" target="_blank">
              <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
            </el-link>
            <div class="ele-upload-list__item-content-action">
              <el-link @click="handleDelete(index)" type="danger">删除</el-link>
            </div>
          </li>
        </transition-group>
        <el-upload :action="uploadFileUrl" :before-upload="handleBeforeUpload" :limit="10" :on-error="handleUploadError" :on-exceed="handleExceed" :on-success="handleUploadSuccess" :show-file-list="false" :headers="headers" class="upload-file-uploader" ref="upload" multiple>
          <!-- 上传按钮 -->
          <el-button size="mini" type="primary">选取文件</el-button>
        </el-upload>
        <!-- 上传提示 -->
        <div class="el-upload__tip" slot="tip" v-if="showTip">
          请上传
          <template v-if="fileSize">
            大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
          </template>
          <template v-if="fileType">
            格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
          </template>
          的文件
        </div>
      </div>
    </template>
    <script>
    import { getToken, getTenantId } from "@/utils/auth";
    
    export default {
      props: {
        // 值
        value: [String, Object, Array],
        // 大小限制(MB)
        fileSize: {
          type: Number,
          default: 5,
        },
        // 文件类型, 例如['png', 'jpg', 'jpeg']
        fileType: {
          type: Array,
          default: () => ["doc", "xls", "ppt", "txt", "pdf"],
        },
        // 是否显示提示
        isShowTip: {
          type: Boolean,
          default: true,
        },
        teacherFileList: {
          type: Array,
        }
      },
      data() {
        return {
          uploadFileUrl: process.env.VUE_APP_BASE_API + "/file/uploadDocument", // 上传的图片服务器地址
          headers: {
            Authorization: "Bearer " + getToken(),
            'tenantid': getTenantId()
          },
          fileList: [],
        };
      },
      computed: {
        // 是否显示提示
        showTip() {
          return this.isShowTip && (this.fileType || this.fileSize);
        },
        // 列表
        list() {
          let temp = 1;
          if (this.value) {
            // 首先将值转为数组
            const list = Array.isArray(this.value) ? this.value : [this.value];
            // 然后将数组转为对象数组
            return list.map((item) => {
              if (typeof item === "string") {
                item = { name: item, url: item };
              }
              item.uid = item.uid || new Date().getTime() + temp++;
              return item;
            });
          } else {
            this.fileList = [];
            return [];
          }
        },
      },
      methods: {
        // 上传前校检格式和大小
        handleBeforeUpload(file) {
          // 校检文件类型
          if (this.fileType) {
            let fileExtension = "";
            if (file.name.lastIndexOf(".") > -1) {
              fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
            }
            const isTypeOk = this.fileType.some((type) => {
              if (file.type.indexOf(type) > -1) return true;
              if (fileExtension && fileExtension.indexOf(type) > -1) return true;
              return false;
            });
            if (!isTypeOk) {
              this.$message.error(
                `文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`
              );
              return false;
            }
          }
          // 校检文件大小
          if (this.fileSize) {
            const isLt = file.size / 1024 / 1024 < this.fileSize;
            if (!isLt) {
              this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
              return false;
            }
          }
          return true;
        },
        // 文件个数超出
        handleExceed() {
          this.$message.error(`只允许上传单个文件`);
        },
        // 上传失败
        handleUploadError(err) {
          this.$message.error("上传失败, 请重试");
        },
        // 上传成功回调
        handleUploadSuccess(res, file) {
          if (res.code !== 200) {
            this.$message.danger(`${res.msg}`);
          } else {
            // console.log(res);
            this.fileList.push(res.data.url);
            this.$emit("input", this.fileList);
            this.$message.success("上传成功");
          }
        },
        // 删除文件
        handleDelete(index) {
          this.fileList.splice(index, 1);
          this.$emit("input", this.fileList);
        },
        // 获取文件名称
        getFileName(name) {
          if (name.lastIndexOf("/") > -1) {
            return name.slice(name.lastIndexOf("/") + 1).toLowerCase();
          } else {
            return "";
          }
        },
      },
    };
    </script>
    
    <style scoped lang="scss">
    .upload-file-list .el-upload-list__item {
      border: 1px solid #e4e7ed;
      line-height: 2;
      margin: 2px 0 8px 0px;
      position: relative;
    }
    .upload-file-list .ele-upload-list__item-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: inherit;
    }
    .ele-upload-list__item-content-action .el-link {
      margin-right: 10px;
    }
    </style>
    
    
    展开全文
  • 如图,想要批量复制属性名,不需要一个一个的复制,只需按住alt+鼠标左键从上往下拉,将光标定位在每个属性名的前面,再按ctrl+w就可以选中所有光标后面的单词了。

     如图,想要批量复制属性名,不需要一个一个的复制,只需按住alt+鼠标左键从上往下拉,将光标定位在每个属性名的前面,再按ctrl+w就可以选中所有光标后面的单词了。

    展开全文
  • 商品属性多选.html

    2019-05-29 10:33:49
    商城,商品属性联动多选功能
  • 场景实现多选非常简单: 手动添加一个el-table-column,设type属性为selection即可。多选效果单选效果注:实现实现多选在el-table中添加一个el-table-column 设置类型为selection即可并且通过@selection-change=...

    场景

    实现多选非常简单: 手动添加一个el-table-column,设type属性为selection即可。

    多选效果

    b4a696feaa186a27c970829a5dc52aaf.png

    13427666.html

    单选效果

    3edcb24d65b7c40ff408f76cc759f0cf.png

    13427666.html

    注:

    实现

    实现多选

    在el-table中添加一个el-table-column 设置类型为selection即可

    并且通过

    @selection-change="handleSelectionChange"

    设置其所选项改变事件,在事件对应的方法handleSelectionChange中

    //多选框选中数据

    handleSelectionChange(selection) {//获取所有选中项的gh(工号)属性的值

    this.ghs = selection.map(item =>item.gh)//获取所有选中项数组的长度

    this.selectedNum =selection.length

    },

    其中selection是作为选中项的一个数组,可以通过map方法来获取对应gh列即工号列的所有值

    其中this.ghs 和 this.selectedNum 要提前声明

    data() {return{//选中数组

    ghs: [],//选中的记录数量

    selectedNum:0,

    效果

    e6829b1203bd2f5486a121f9742371ed.gif

    13427666.html

    实现单选

    v-loading="loading":data="kqryszList"@selection-change="handleSelectionChange"

    ref="tb"

    >

    与实现多选类似,需要添加一列类型为selection。

    除了设置其选项改变事件外,还需要设置其ref属性。

    设置ref的目的是能在方法中通过

    this.$refs.tb

    获取这个table

    在方法handleSelectionChange中

    //单选框选中数据

    handleSelectionChange(selection) {this.checkedGh = selection[0].gh;if (selection.length > 1) {this.$refs.tb.clearSelection();this.$refs.tb.toggleRowSelection(selection.pop());

    }

    },

    此方法的实现逻辑就是,通过设置的ref属性和 this.$refs.tb来获取这个table,

    然后判断选择项的数组selection的长度大于1的话就清除数组并设置选择最后一次选中的项。

    并且通过

    this.checkedGh = selection[0].gh;

    获取选项行的gh属性的值。

    其中checkedGh需要提前在

    data() {return{//选中的工号

    checkedGh: [],

    声明。

    效果

    c8cc421fa2b2320aebf23558535874c4.gif

    13427666.html

    展开全文
  • 我获取了一个列表的数据后,想要多选中列,将这些列的属性统一进行处理 例如下图: ![图片说明]... !...按钮触发方法hot();ishot==0 则为否 ishot==1则为是。
  • vue下拉框多选

    千次阅读 2022-04-20 18:18:56
    v-model绑定的value2就是你下拉框要多选的参数,例:1,2 <el-select v-model="value2" allow-create filterable multiple collapse-tags default-first-option placeholder="请选择文章标签"> <el-...
  • 本发明属于互联网技术领域,尤其涉及一种复选框滑动多选的方法。背景技术:随着互联网的普及程度不断提高,基于浏览器的web应用系统越来越多,在web系统里,复选框作为批量操作数据的选择器,是使用频率较高的web...
  • OpenFileDialog多选多个文件

    千次阅读 2018-05-16 07:51:42
    i:integer;begin if opendialog1.Execute then begin files:=opendialog1.Files ; //获得所有文件名 for i :=0 to files.count do listbox1.items.add(files[i])//...
  • Android 图片多选

    2021-01-02 17:01:12
    Android 图片多选 由于项目比较老,用的手机又是华为,不能使用Google相关的最新图片选择器,所以找资源很费劲,现在解决了和大家分享一下。 引用文章地址:https://www.ctolib.com/AlbumSelector.html 支持API ...
  • 这次给大家带来在HTML中select标签怎样实现单选和多选,在HTML中select标签实现单选和多选的注意事项有哪些,下面就是实战案例,一起来看一下。select 元素可创建单选或多选菜单。当提交表单时,浏览器会提交选定的...
  • combox加Cekbox实现多选按钮

    热门讨论 2013-06-21 10:13:31
    combox加Cekbox实现多选按钮 combox实现多选功能并输出到textbox中
  • QComboBox的下拉多选

    2022-02-07 21:30:48
    文章目录前言一、ComboBox的下拉多选二、实现原理1.下拉框点击不隐藏2.选中下拉项内容显示3.实列代码总结 前言 Qt的ComboBox实现下拉选择多个下拉项: Qt默认的QComboBox在点击下拉时,每次只能有一个下拉项被选中...
  • 不知道怎么描述,就是有两个select下拉,做成文本域那样的,可以从一侧的结果集中选择值,添加到另一侧中;另一侧删掉后,值又重新到结果集那边了。直接看范例演示吧,相信你以前后者以后会用到的! 不多说了,上...
  • 本篇教程介绍了...select元素可创建单选或多选菜单。元素中的标签用于定义列表中的可用选项。提示:select元素是一种表单控件,可用于在表单中接受用户输入。属性New:HTML5中的新属性。属性值描述autofocus(5...
  • 多选字段数据库设计

    2022-01-13 19:56:13
    多选字段数据库表设计。
  • select下拉框(支持筛选、多选

    千次阅读 2021-06-11 14:14:14
    deselect 是否允许取消选择 max_selected_options 当select为多选时,最多选择个数 4、事件 a) change事件: b) 当我们需要动态更新select下的选择项时,该怎么办呢?只要在更新选择项后触发Chosen中的liszt:...
  • 鼠标拖拽多选功能</title> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <style type="text/css"> * { box-sizing: border-box; }
  • clojurescript-- TreeSelect树形结构多选

    千次阅读 2019-11-08 09:40:56
    先上页面直观感受一下:如下图就是我想要的结果 根据上图,知道自己要干的事什么事情了吧。...数据格式是什么的? ant design中的treeselect中的数据格式是 [{" title":"","value":"","children":[{}]}] ...
  • FastAdmin多选selectpage

    千次阅读 2021-01-21 15:50:21
    FastAdmin 多选 selectpage 数据库建立字段 以_ids为结尾创建数据库字段字段,类型为varchar .html文件 以person_ids为例: data-max-select-limit="5"多选限制 <div class="form-group"> <label ...
  • vant实现select多选效果

    千次阅读 2021-07-26 18:05:07
    背景:移动端需要和pc端select多选相对应,但是并没有现成的组件,vant只提供了picker选择器可以实现单选效果,所以需要自己封装组件 方法:把cell单元格和checkbox复选框结合,实现多选效果 代码(js代码根据需要...
  • 多选按钮进行数据删除是 新旧替换的快捷方法
  • } 多选: 1、 List strList = new ArrayList(); 2、 bt.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { if (strList.contains(data)){ strList.remove(data); }else...
  • 看到网上有很多漂亮的按钮,其中大多掺杂js来实现,今天我们来做一个纯CSS+HTML实现的单选按钮,让菜鸟小白也能轻松做出来!首先附上最后的效果图:(忽略我追星的肤浅!) 一、 首先,我们写基本代码:我们写4个div...
  • vue elementui el-table 多选 回显

    千次阅读 2022-04-19 13:49:54
    // tableData是所有的数据 // checkl是需要选中的数据 // id是每条数据的唯一值 this.tableData.forEach(row => { this.checkl?.forEach(rows =>...如果要实现分页多选,保持数据的选中状态 给e...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,002
精华内容 4,000
关键字:

怎样多选