Element-UI代码集

一、el-input 只能输入数字

<el-input v-model="hisPatient.age" type="number" placeholder="患者年龄"  maxlength="3" min="1" oninput="value=value.replace(/[^\d]/g,'')"/>

二、el-table 设置列el-table-column的内边距为0

2.1 设置上下内边距为0

在el-table上设置:cell-style属性：:cell-style="{padding:'0px'}

<el-table v-loading="loading" :data="item.records" v-bind:key="rowIndex" size="small" border :cell-style="{padding:'0px'}">
    <el-table-column label="培养基" align="center" prop="culture" width="150px">
      <template #default="scope">
        <el-input v-model="scope.row.cultureTime" :key="rowIndex" maxlength="10" type="number" style="width: 100%"
          placeholder="请输入" />
      </template>
    </el-table-column>
</el-table>

设置上下内边距为0

2.2 设置左右内边距为0

默认内边距 修改成0

.el-table--small .cell {
  padding: 0 0px;
}

三、获取el-table的下标和序号

<el-table-column label="序号" align="center" type="index" width="80px" />

四、el-table设置表格对齐方式

<el-table :data="tableData" v-loading="loading" border>
  <el-table-column prop="specimenTypeName" label="标本类别" header-align="center" align="left"/>
  <el-table-column prop="specimenCount" label="标本数量" header-align="center" align="right"/>
</el-table>

五、el-form-item动态设置label

<div v-for="(item, index) in form.moreRuleList" v-bind:key="index">
  <el-row style="margin-top: 20px;">
    <span v-show="false"> {{ index++ }}</span>
    <el-form-item :label="'条件' + index--">
      <el-select v-model="item.ruleMoreType" placeholder="条件类型" filterable clearable
        style="width: 15%;margin-left: 0px;" @change="ruleMoreTypeChange(item)">
        <el-option v-for="dict in dic_rule_more_type" :key="dict.value" :label="dict.label"
          :value="dict.value"></el-option>
      </el-select>
    </el-form-item>
  </el-row>
</div>

效果图

六、el-select

6.1 el-select绑定change事件&获取值

<el-form-item label="生化试验类型" prop="expList" maxlength="50">
  <el-select v-model="form.expList" placeholder="请选择" filterable clearable multiple style="width: 100%" @change="expChange">
    <el-option v-for="dict in trial_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
  </el-select>
</el-form-item>

function expChange(options) {
  console.log("选项内容:",options)
}

6.2 el-select 选项值为字符串数组

<el-form-item label="培养基类型" prop="cultureList" maxlength="50">
  <el-select v-model="form.cultureList" placeholder="请选择" filterable clearable multiple style="width: 100%"
    @change="cultureChange">
    <el-option v-for="dict in cultureNameList" :key="dict" :label="dict" :value="dict"></el-option>
  </el-select>
</el-form-item>

6.3 el-select 调用远程查询过接口、传id和name到后端

<el-form-item label="标本类别:" prop="specimenTypeId">
  <el-select v-model="form.specimenTypeId" value-key="code" filterable remote reserve-keyword clearable
    remote-show-suffix :remote-method="findSpecimenTypeListOption" :loading="loading" placeholder="请选择标本类别"
    style=" width: 100%;" @change="specimenTypeChange">
    <el-option v-for="dict in specimenTypeOptions" :key="dict.code" :label="dict.name" :value="dict.code">
    </el-option>
  </el-select>
</el-form-item>

const specimenTypeOptions = ref([]);

/** 标本类别selected */
function specimenTypeChange(option) {
  specimenTypeOptions.value.forEach((item) => {
    if (item.code === option) {
      form.value.specimenTypeId = item.code;
      form.value.specimenTypeName = item.name;
    }
  })
}

function findSpecimenTypeListOption(query) {
  specimenTypeOptions.value = []
  loading.value = true
  specimenTypeListOption({
    keywords: query
  }).then(res => {
    loading.value = false
    specimenTypeOptions.value = res.data
  });
}

七、el-input绑定失焦事件&获取值

<el-input v-model="scope.row.germDiam" :key="rowIndex" show-word-limit maxlength="30" placeholder="请输入菌圈直径" @blur="blurGermDiam(scope.row.germDiam)" />

function blurGermDiam(value) {
  console.log("blurGermDiam.value======================",value);
}

八、el-input绑定回车事件

<el-input v-model="input" @keyup.enter.native="search1">

九、el-badge显示红点&取消默认点击事件

<el-radio-button label="1" :disabled="!hasReport">
   <el-badge @click="e.preventDefault();" :is-dot="remindCount > 0">一级报告</el-badge>
</el-radio-button>