element ui 整数

转载

mob64ca1404ed65 2024-09-10 23:13:54

文章标签 element ui 整数 vue.js javascript ecmascript ide 文章分类 机器学习人工智能

2023.2.7今天我学习了如何使用vue+element相关组件实现一个简易版的计算器。

效果：

element ui 整数_javascript

样式什么的比较容易，

重点讲一下点击等式右边元素的添加按钮循环出来的下拉框和按钮方法。

element ui 整数_javascript_02

element ui 整数_ecmascript_03

当我们点击按钮之后会出现对应的一个下拉框和按钮。

（1）添加按钮

添加按钮html代码如下：

<el-button @click="add_metadata_input"></el-button>

js代码如下：

// 实现新增统计指标表格内部的等式右边元素添加输入框的按钮
    add_metadata_input() {
//存放数据添加（下拉框和按钮的值都存在这里）
      this.inputData.push({
        id: 'cell' + this.dataNum++,
        data: ''
      })
    },

(2)下拉框和label名

element ui 整数_javascript_04

下拉框html代码如下：

最重要的部分是v-model绑定的值需要用到index，如下：v-model="addMetadataSelect[index]"

不然会出现点一个下拉框同时选中其他下拉框的情况。

<!--实现新增统计指标弹窗右边元素的下拉框的效果-->
//inputData绑定等式右边元素添加的按钮数据
          <div v-for="(outside_item,index) in inputData" :key="outside_item.id">

            <!--:label="outside_item.id"循环出来的label名-->
             //如cell1,cell2
            <el-form-item :label="outside_item.id">

              <!--v-model="addMetadataSelect[index]"绑定循环出来的下拉框的值对应【index防止点击一个下拉框全部下拉框都发生改变】-->
              <!--@change="metadataSelect(addMetadataSelect[index])"绑定下拉框的改变事件-->
              <el-select style="width: 400px;" v-model="addMetadataSelect[index]" value-key="id"
                         @change="metadataSelect(addMetadataSelect[index])"
              >
                <el-option v-for="(inside_item,index) in  add_metadata_select" :key="index"
                           :value="inside_item.metadata_name" :label="inside_item.metadata_name"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>

js代码如下：

// 新增统计指标弹窗等式右边元素下拉框的改变方法
    metadataSelect(val) {
      let metadataCode = ''
      let metadataName = ''
      let metadataId = ''
      for (let i = 0; i < this.inputData.length; i++) {
        for (let j = 0; j < this.inputData[i].data.length; j++) {
          if (val == this.inputData[i].data[j].metadata_name) {
            metadataCode = (this.inputData[i].data[j].metadata_code)
            metadataName = (this.inputData[i].data[j].metadata_name)
            metadataId = (this.inputData[i].id)
          }
        }
      }
      // 拿到对应的编码
      this.metadataCode = metadataCode
      // 拿到对应的名称
      this.metadataName = metadataName
    },

（3）按钮和label名

最重要的部分按钮的方法要传下拉框的值，为了防止出现按钮点击重复的问题，如不同的下拉框的值点击之后显示相同的按钮值。

cell(addMetadtaSelect[index])这样可以拿到对应的下拉框的值

element ui 整数_element ui 整数_05

按钮html代码如下：

<!--@click="cell(addMetadataSelect[index])"实现cell按钮的方法，绑定到对应的下拉框的值-->
                <el-button size="mini" 
                           v-for="(outside_item,index) in inputData"
                           :key="index"
                           @click="cell(addMetadataSelect[index])"
                >
                 //根据push的数组拿到对应的id
                  <span >{{ outside_item.id }}</span>
                </el-button>

js代码如下：

// 新增统计指标弹窗选择下拉框对应的按钮方法
    cell(data) {
      // 拿到对应的编码
      let select_data_code = ''
      // 拿到对应的名称
      let select_data_name = ''
      for (let i = 0; i < this.metadataList.length; i++) {
        if (data == this.metadataList[i].metadata_name) {
          select_data_code = (this.metadataList[i].metadata_code)
          select_data_name = (this.metadataList[i].metadata_name)
        }
      }
      this.number_input = this.number_input + '#' + select_data_code + '#'
      this.no_show_number_input = this.no_show_number_input + select_data_name

    },

完整代码：

完整html代码如下：

<!--新增统计指标的弹窗 -->
    <!--@close="add_metadata_cancel()"弹窗关闭的方法-->
    <el-dialog :title="add_metadata_title" :visible.sync="add_metadata_open" width="600px"
               append-to-body @close="add_metadata_cancel()"
    >
      <el-form ref="add_metadata_form" label-width="50px" :model="add_metadata_form" :rules="add_metadata_rules">

        <!--设置新增指标信息弹窗的表格等式左边元素的样式-->
        <div class="add_metadata_outside_border">
          <div class="add_metadata_left">等式左边元素</div>
          <div class="add_metadata_inside_input">
            <!--设置宽度-->
            <el-col :span="18">

              <!--名称的键值 statistical_object_name-->
              <el-form-item label="名称" prop="statistical_object_name">
                <el-input clearable v-model="add_metadata_form.statistical_object_name"/>
              </el-form-item>

            </el-col>

            <!--编号的键值 name_code-->
            <el-form-item label="编号" prop="name_code">
              <el-input clearable v-model="add_metadata_form.name_code"/>
            </el-form-item>

            <!--单位的键值 unit-->
            <el-form-item label="单位" prop="unit">
              <el-input clearable v-model="add_metadata_form.unit"/>
            </el-form-item>

          </div>
        </div>
        <br/>

        <!--设置新增指标信息弹窗的表格等式右边元素的样式-->
        <div class="add_metadata_outside_border">
          <div class="add_metadata_right">等式右边元素

            <!--@click="add_metadata_input"实现等式右边添加输入框的方法-->
            <!--@click="add_metadata_input"添加下拉框和对应的cell方法-->
            <el-button size="mini" class="add_metadata_right_button" @click="add_metadata_input">
              <i class="el-icon-plus"
                 style="color:white;font-weight: bolder;display: flex;
                 justify-content: center;align-items: center"
              ></i></el-button>
          </div>

          <!--设置新增指标信息弹窗的表格等式右边元素的下拉框空白部分（默认显示添加下拉框之后隐藏）-->
          <div style="height: 30px;" v-show="add_metadata_inside_style"></div>

          <!--实现新增统计指标弹窗右边元素的下拉框的效果（默认隐藏点击添加按钮之后显示）-->
          <div v-for="(outside_item,index) in inputData" :key="outside_item.id" class="add_metadata_inside_right_input"
               v-show="add_metadata_inside_select"
          >
            <!--:label="outside_item.id"循环出来的label名-->
            <el-form-item :label="outside_item.id">

              <!--v-model="addMetadataSelect[index]"绑定循环出来的下拉框的值对应【index防止点击一个下拉框全部下拉框都发生改变】-->
              <!--@change="metadataSelect(addMetadataSelect[index])"绑定下拉框的改变事件-->
              <el-select style="width: 400px;" v-model="addMetadataSelect[index]" value-key="id"
                         @change="metadataSelect(addMetadataSelect[index])"
              >
                <el-option v-for="(inside_item,index) in  add_metadata_select" :key="index"
                           :value="inside_item.metadata_name" :label="inside_item.metadata_name"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <br/>

        <!--设置新增指标信息弹窗的表格等式右边元素的样式-->
        <div class="add_metadata_outside_border">
          <div class="add_metadata_left">计算公式</div>
          <div style="display:flex;justify-content: space-around;margin: 15px">

            <!--:readonly="true"表示只读不能用鼠标或键盘输入-->
            <!--:disabled="true"表示禁用-->
            <el-input class="input-border-style" id="number_input" v-model="number_input" :readonly="true"/>

            <!--@click="number_input_delete"实现回删的按钮方法（每次删除一个字符）-->
            <el-button type="danger" style="margin: 0 10px;" @click="number_input_delete">回删</el-button>
          </div>

          <!--实现新增统计指标弹窗计算公式的按钮方法-->
          <div>
            <el-button size="mini" class="add_metadata_right_outside_button" @click="calc(1)">
              <span class="add_metadata_compute_number">1</span>
            </el-button>
            <el-button size="mini" class="add_metadata_right_outside_button" @click="calc(2)">
              <span class="add_metadata_compute_number">2</span>
            </el-button>
            <el-button size="mini" class="add_metadata_right_outside_button" @click="calc(3)">
              <span class="add_metadata_compute_number">3</span>
            </el-button>
            <el-button size="mini" class="add_metadata_right_outside_button" @click="calc(4)">
              <span class="add_metadata_compute_number">4</span>
            </el-button>
            <el-button size="mini" class="add_metadata_right_outside_button" @click="calc(5)">
              <span class="add_metadata_compute_number">5</span>
            </el-button>
            <el-button size="mini" class="add_metadata_right_outside_button" @click="calc(6)">
              <span class="add_metadata_compute_number">6</span>
            </el-button>
            <el-button size="mini" class="add_metadata_right_outside_button" @click="calc(7)">
              <span class="add_metadata_compute_number">7</span>
            </el-button>
            <el-button size="mini" class="add_metadata_right_outside_button" @click="calc(8)">
              <span class="add_metadata_compute_number">8</span>
            </el-button>
            <el-button size="mini" class="add_metadata_right_outside_button" @click="calc(9)">
              <span class="add_metadata_compute_number">9</span>
            </el-button>
            <el-button size="mini" class="add_metadata_right_outside_button" @click="calc(0)">
              <span class="add_metadata_compute_number">0</span>
            </el-button>
            <br/>
            <el-button size="mini" class="add_metadata_right_outside_button" @click="calc('(')">
              <span class="add_metadata_compute_number">(</span>
            </el-button>
            <el-button size="mini" class="add_metadata_right_outside_button" @click="calc(')')">
              <span class="add_metadata_compute_number">)</span>
            </el-button>
            <el-button size="mini" class="add_metadata_right_outside_button" @click="calc('+')">
              <span class="add_metadata_compute_number">+</span>
            </el-button>
            <el-button size="mini" class="add_metadata_right_outside_button" @click="calc('-')">
              <span class="add_metadata_compute_number">-</span>
            </el-button>
            <el-button size="mini" class="add_metadata_right_outside_button" @click="calc('*')">
              <span class="add_metadata_compute_number">*</span>
            </el-button>
            <el-button size="mini" class="add_metadata_right_outside_button" @click="calc('/')">
              <span class="add_metadata_compute_number">/</span>
            </el-button>
            <el-button size="mini" class="add_metadata_right_outside_button" @click="calc('%')">
              <span class="add_metadata_compute_number">%</span>
            </el-button>
            <br/>

            <!--新增统计指标弹窗计算公式对应的cell会增加-->
            <!--v-show="add_metadata_inside_select"显示cell按钮（默认隐藏点击添加按钮的时候显示）-->
            <div style="display: flex;flex-wrap: wrap">
              <div
                v-show="add_metadata_inside_select"
              >
                <!--@click="cell(addMetadataSelect[index])"实现cell按钮的方法，绑定到对应的下拉框的值-->
                <el-button size="mini" class="add_metadata_right_outside_cell_button"
                           v-for="(outside_item,index) in inputData"
                           :key="index"
                           @click="cell(addMetadataSelect[index])"
                >
                  <span class="add_metadata_compute_number">{{ outside_item.id }}</span>
                </el-button>
              </div>
            </div>

            <!--@click="clear_compute_btn"实现清空输入框的方法-->
            <el-button type="danger" class="clear_compute" @click="clear_compute_btn">清空计算公式</el-button>
          </div>
        </div>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <!--@click="add_metadata_submit"实现新增指标信息弹窗的确定方法-->
        <el-button type="primary" @click="add_metadata_submit">确 定</el-button>
        <!--@click="add_metadata_cancel"实现新增指标信息弹窗的取消方法-->
        <el-button @click="add_metadata_cancel">取 消</el-button>
      </div>
    </el-dialog>

完整css代码如下：

<style>
/*设置新增添加指标弹窗的表格外边框样式*/
.add_metadata_outside_border {
  border: 1px solid #c7c6c6;
  border-radius: 5px
}

/*设置新增添加指标弹窗的表格等式左边元素的样式*/
.add_metadata_left {
  background-color: #f5f1f1;
  height: 40px;
  padding: 10px;
  border-radius: 5px
}

/*设置新增添加指标弹窗的表格等式右边元素的样式*/
.add_metadata_right {
  background-color: #f5f1f1;
  height: 50px;
  padding: 10px
}

/*设置新增添加指标弹窗的表格内部输入框的样式*/
.add_metadata_inside_input {
  display: flex;
  margin: 15px;
  height: 40px
}

/*设置新增统计指标弹窗的等式右边元素添加按钮的样式*/
.add_metadata_right_button {
  margin: 0 5px;
  background: rgb(64, 142, 186);
  width: 20px;
}

/*设置新增统计指标弹窗的计算公式按钮外部的样式*/
.add_metadata_right_outside_button {
  background: rgb(64, 142, 186);
  width: 20px;
  margin: 10px 13px;
}

/*设置新增统计指标弹窗的计算公式按钮cell的样式*/
.add_metadata_right_outside_cell_button {
  background: rgb(64, 142, 186);
  width: 50px;
  margin: 10px 13px;
}

/*设置新增统计指标弹窗的等式右边元素下拉框的外部样式的样式*/
.add_metadata_inside_right_input {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 15px;
}

/*设置新增统计指标弹窗的计算公式的按钮*/
.add_metadata_compute_number {
  display: flex;
  justify-content: center;
  align-items: center;
  color: white
}

/*设置新增统计指标弹窗的计算公式的清空计算公式的样式*/
.clear_compute {
  width: 535px;
  margin: 12px
}

</style>

完整js代码如下：

(1)data数据

data() {
    return {
      // 存放新增统计指标弹窗等式右边元素的添加按钮数据
      inputData: [],
      // 存放新增统计指标弹窗计算公式的选中下拉框对应的code数据
      metadataCode: '',
      // 存放新增统计指标弹窗计算公式的选中下拉框对应的name数据
      metadataName: '',
      // 存放新增统计指标弹窗计算公式的选中下拉框对应的code和name数据
      add_metadata_name_and_code: [],
      // 新增指标信息的标题
      add_metadata_title: '',
      // 新增指标信息的弹窗
      add_metadata_open: false,
      // 新增指标信息弹窗等式右边元素的下拉框递增
      dataNum: 1,
      // 新增统计指标弹窗等式右边元素的下拉框默认隐藏
      add_metadata_inside_select: false,
      add_metadata_inside_style: true,
      // 修改指标信息的标题
      update_metadata_title: '',
      // 修改指标信息的弹窗
      update_metadata_open: false,
      // 存放新增指标信息的表单数据
      add_metadata_form: {},
      // 存放新增统计指标计算公式输入框的值
      number_input: '',
      // 存放新增统计指标计算公式输入框的值(name)
      no_show_number_input: '',
      // 存放修改指标信息的表单数据
      update_metadata_form: {},
      // 新增添加指标弹窗等式右边元素的下拉框
      add_metadata_select: [],
      addMetadataSelect: [],
      metadataList: [],
      // 新增指标信息的校验方法
      add_metadata_rules: {
        statistical_object_name: [{ required: true, message: '请输入指标名称', trigger: 'blur' }],
        name_code: [{ required: true, message: '请输入编号', trigger: 'blur' }],
        unit: [{ required: true, message: '请输入单位', trigger: 'blur' }]
      },
 }
}

（2）methods方法

// 新增统计指标弹窗计算公式的回删功能
    number_input_delete() {
      this.number_input = this.number_input.replace(/.$/, '')
      this.no_show_number_input = this.no_show_number_input.replace(/.$/, '')
    },

// 新增统计指标弹窗等式右边元素下拉框的改变方法
    metadataSelect(val) {
      console.log(val)
      let metadataCode = ''
      let metadataName = ''
      let metadataId = ''
      for (let i = 0; i < this.inputData.length; i++) {
        for (let j = 0; j < this.inputData[i].data.length; j++) {
          if (val == this.inputData[i].data[j].metadata_name) {
            metadataCode = (this.inputData[i].data[j].metadata_code)
            metadataName = (this.inputData[i].data[j].metadata_name)
            metadataId = (this.inputData[i].id)
          }
        }
      }
      this.metadataCode = metadataCode
      this.metadataName = metadataName
      this.add_metadata_name_and_code = [{
        name: this.metadataName,
        code: this.metadataCode,
        id: metadataId
      }]
    },


 // 新增统计指标弹窗选择下拉框对应的按钮方法
    cell(data) {
      // 拿到对应的编码
      let select_data_code = ''
      // 拿到对应的名称
      let select_data_name = ''
      for (let i = 0; i < this.metadataList.length; i++) {
        if (data == this.metadataList[i].metadata_name) {
          select_data_code = (this.metadataList[i].metadata_code)
          select_data_name = (this.metadataList[i].metadata_name)
        }
      }
      this.number_input = this.number_input + '#' + select_data_code + '#'
      this.no_show_number_input = this.no_show_number_input + select_data_name

    },

// 实现新增统计指标弹窗计算公式的按钮方法
    calc(number) {
      this.number_input = this.number_input + number
      this.no_show_number_input = this.no_show_number_input + number
    },


 // 实现新增统计指标表格内部的等式右边元素添加输入框的按钮
    add_metadata_input() {
      this.add_metadata_inside_style = false
      this.add_metadata_inside_select = true
      this.inputData.push({
        id: 'cell' + this.dataNum++,
        data: this.metadataList
      })
    },

  // 实现修改统计指标页面内部的等式右边元素添加输入框的按钮
    update_metadata_input() {
      if (this.inputData.length > 0) {
        let newData = (this.inputData.length + 1)
        this.inputData.push({
          id: 'cell' + newData,
          data: this.metadataList
        })
      } else {
        this.add_metadata_input()
      }
    },

// 实现新增统计指标弹窗计算公式的清空计算公式的按钮实现
    clear_compute_btn() {
      this.number_input = ''
      this.no_show_number_input = ''
    },

    // 实现新增指标信息弹窗的确定按钮方法
    add_metadata_submit() {

      this.$refs['add_metadata_form'].validate(valid => {
        if (valid) {
          //拿到表单数据
          console.log(this.add_metadata_form)
          // 拿到下拉框的全部数据
          console.log(this.addMetadataSelect)
          //拿到输入框的数据
          console.log(this.no_show_number_input)

          this.add_metadata_open = false
        }
      })
      this.getList()
    },

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。