vue下拉框字典映射转换失败 字符转数字parseInt :value 下拉框无法选择 el-select默认选中 设为只读 input输入框设为只读 el-table字典转换 vue普通文字标签

字典下拉框不自动映射值(字符串转数字)

解决后:

关键点:

        1、value="0" 与 :value="0" 不同,加冒号:试试

        2、:value="parseInt(dict.dictValue)" 字符串转int试试 parseInt()

                或用 :value="Number(dict.dictValue)"

写死下拉框

<el-form-item label="类型" prop="type">
  <el-select v-model="form.type" style="width:240px" clearable size="small">
    <el-option label="充值" :value="0" />
    <el-option label="赠送" :value="1" />
    <el-option label="校正" :value="2" />
  </el-select>
</el-form-item>

字典下拉框

<el-form-item label="学员状态">
  <el-select v-model="form.status" style="width:200px" clearable size="small">
    <el-option
      v-for="dict in statusOptions"
      :key="dict.dictValue"
      :label="dict.dictLabel"
      :value="parseInt(dict.dictValue)"
    />
  </el-select>
</el-form-item>

或者用Number

<el-col :span="12">
  <el-form-item label="类型" prop="type">
    <el-select v-model="form.type" style="width:240px" clearable size="small">
      <el-option
        v-for="dict in typeOptions"
        :key="dict.dictValue"
        :label="dict.dictLabel"
        :value="Number(dict.dictValue)"
      />
    </el-select>
  </el-form-item>
</el-col>

 

下拉框无法选择 选什么都是最后一个 

        正确应为:

                

原因:这是又不能用:value了

:value="身份证"        错误写法

value="身份证"         正确写法(字符串时不要加冒号)

正确示例代码:

<el-form-item label="证件类型" prop="idCardType">
  <el-select v-model="form.idCardType" style="width:200px" clearable size="small">
    <el-option label="身份证" value="身份证" />
    <el-option label="护照" value="护照" />
    <el-option label="军官证" value="军官证" />
    <el-option label="其他" value="其他" />
  </el-select>
</el-form-item>

el-select默认选中 

        只能用初始化数据方式

// 打开新增的弹出层
handleAdd() {
  this.open = true
  this.reset()
  this.title = '新增'
  // 默认初始值
  this.form.idCardType = '身份证'
  this.form.status = 0
}

input输入框设为只读

<el-col :span="8">
  <el-form-item label="应交费">
    <el-input v-model="form.needfeeConfig" readonly="readonly" style="width:200px" clearable size="small" />
  </el-form-item>
</el-col>

el-select设为只读

        readonly="readonly"        input输入框可以用readonly

        disabled="disabled"        el-select只能用这个 用readonly无效

<el-form-item label="学员状态">
  <el-select v-model="form.status" disabled="disabled" style="width:200px" clearable size="small">
    <el-option
      v-for="dict in statusOptions"
      :key="dict.dictValue"
      :label="dict.dictLabel"
      :value="parseInt(dict.dictValue)"
    />
  </el-select>
</el-form-item>

参考:

注意:只读但需要传递到后台

readonly 设置对select标签无效

方式二、先利用disabled 属性显示,但需要在表单提交前移除disabled属性。否则无法向后台传递该参数

<select id="pid"readonly="readonly" disabled="disabled" /> //用此方法时,提交表单前移除disabled属性,$("#pid").removeAttr("disabled");

方式四、利用disabled 和 隐藏的输入框来传值(推荐)

<select readonly disabled="disabled" />

<input name="pid" value="真实需要传递的参数值" type="hidden" class="hidden" >

el-table字典转换

Tag 标签模式(el-tag)

<el-table-column label="学员状态" align="center" prop="status">
  <template slot-scope="{row}">
    <el-tag v-if="(row.status === 0)" type="primary">{{ statusFormatter(row) }}</el-tag>
    <el-tag v-else-if="(row.status === 1)" type="success">{{ statusFormatter(row) }}</el-tag>
    <el-tag v-else-if="(row.status === 2)" type="success">{{ statusFormatter(row) }}</el-tag>
    <el-tag v-else-if="(row.status === 3)" type="danger">{{ statusFormatter(row) }}</el-tag>
    <el-tag v-else-if="(row.status === 4)" type="success">{{ statusFormatter(row) }}</el-tag>
    <el-tag v-else-if="(row.status === 5)" type="info">{{ statusFormatter(row) }}</el-tag>
    <el-tag v-else-if="(row.status === -1)" type="danger">{{ statusFormatter(row) }}</el-tag>
    <el-tag v-else-if="(row.status === -2)" type="danger">{{ statusFormatter(row) }}</el-tag>
    <el-tag v-else-if="(row.status === -3)" type="warning">{{ statusFormatter(row) }}</el-tag>
    <el-tag v-else-if="(row.status === -4)" type="danger">{{ statusFormatter(row) }}</el-tag>
    <el-tag v-else type="info">{{ statusFormatter(row) }}</el-tag>
  </template>
</el-table-column>
// 字典翻译-状态
statusFormatter(row) {
  return this.selectDictLabel(this.statusOptions, row.status)
}

 普通模式

<el-table-column label="性别" align="center" prop="sex">
  <template slot-scope="{row}">
    <span v-if="(row.sex === 1)" type="primary">男</span>
    <span v-else-if="(row.sex === 2)" type="success">女</span>
    <span v-else-if="(row.sex === 0)" type="success">未知</span>
  </template>
</el-table-column>

vue普通文字标签

{{ }}            将元素当成纯文本输出 

v-text         将元素当成纯文本输出

v-html        将元素当成HTML标签解析后输出

HTML中的文字标签
文字标签:
  1.标题标签:<h1></h1>~<h6></h6>
  2.段落标签:<p></p>
  3.普通文字标签:<span></span>没有任任何效果、样式,通过style加 <font></font>
  4.文字加粗标签:<b></b> 、<strong></strong>
  5.文字斜体:<i></i>、<em></em>
  6.超链接标签:<a href="路径"></a>
  7.删除线、中线:<s></s>、<del></del>
  8.下划线标签:<u></u>
a标签阻止提交
    return '<a href="#" οnclick="return false;" class="modify">' + value + '</a>';

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-select是一个基于Element UI的下拉选择框组件,支持单选、多选、远程搜索等功能。可以通过设置不同的属性来实现不同的功能,例如设置multiple属性可以实现多选功能,设置filterable属性可以实现搜索功能等。 以下是一个el-select的基本用法示例: ```html <el-select v-model="selectedOption" placeholder="请选择"> <el-option label="选项1" value="option1"></el-option> <el-option label="选项2" value="option2"></el-option> <el-option label="选项3" value="option3"></el-option> </el-select> ``` 其中,v-model绑定了一个名为selectedOption的变量,用于存储用户选择的值。placeholder属性设置了默认提示文本。 如果需要实现多选功能,可以在el-select上设置multiple属性: ```html <el-select v-model="selectedOptions" multiple placeholder="请选择"> <el-option label="选项1" value="option1"></el-option> <el-option label="选项2" value="option2"></el-option> <el-option label="选项3" value="option3"></el-option> </el-select> ``` 其中,v-model绑定了一个名为selectedOptions的数组,用于存储用户选择的多个值。 如果需要实现搜索功能,可以在el-select上设置filterable属性: ```html <el-select v-model="selectedOption" filterable placeholder="请选择"> <el-option label="选项1" value="option1"></el-option> <el-option label="选项2" value="option2"></el-option> <el-option label="选项3" value="option3"></el-option> </el-select> ``` 其中,filterable属性设置为true,表示开启搜索功能。 如果需要实现全选功能,可以在el-select上设置一个名为options的属性,用于存储所有可选项,然后在el-select上添加一个名为options的slot,用于自定义下拉框中的内容,包括全选按钮和可选项列表。具体实现方式可以参考以下代码: ```html <el-select v-model="selectedOptions" multiple placeholder="请选择" :options="options"> <template #options> <el-checkbox v-model="isAllSelected" @change="handleAllSelectedChange">全选</el-checkbox> <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value" :disabled="option.disabled"> <el-checkbox v-model="selectedOptions" :label="option.value" :disabled="option.disabled">{{ option.label }}</el-checkbox> </el-option> </template> </el-select> ``` 其中,options属性存储了所有可选项,isAllSelected变量用于存储全选状态,handleAllSelectedChange方法用于处理全选状态变化事件。在options slot中,首先添加了一个el-checkbox用于全选,然后使用v-for循环遍历options数组,为每个可选项添加一个el-option,其中包含一个el-checkbox用于选择该项。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值