FCAT

Appearance

解决lable和input水平排列且input宽度可以自定义 ​

1. element 默认情况 ​

  • el-form有个属性inline默认为false，故而lable和input不是水平排列而是分为两行，input输入框占了整行
html
<el-form :model="addDialogForm" :rules="addDialogRules" >
    <el-form-item prop="attr_name" :label="addTitle">
       <el-input v-model="addDialogForm.attr_name" style="width:100%">
       </el-input>
    </el-form-item>
</el-form>
<el-form :model="addDialogForm" :rules="addDialogRules" >
    <el-form-item prop="attr_name" :label="addTitle">
       <el-input v-model="addDialogForm.attr_name" style="width:100%">
       </el-input>
    </el-form-item>
</el-form>

2. :inline="true" 方案 ​

  • 将属性inline设置为true，实现了lable和input水平排列，但是宽度无法自定义设置
html
<el-form :model="addDialogForm" :rules="addDialogRules" :inline="true">
  <el-form-item prop="attr_name" :label="addTitle">
    <el-input v-model="addDialogForm.attr_name" style="width:100%">
    </el-input>
  </el-form-item>
</el-form>
<el-form :model="addDialogForm" :rules="addDialogRules" :inline="true">
  <el-form-item prop="attr_name" :label="addTitle">
    <el-input v-model="addDialogForm.attr_name" style="width:100%">
    </el-input>
  </el-form-item>
</el-form>

注意

在el-form中设置 inline="ture" 时，没法设置宽度

3. el-col 解决方案 ​

  • 关掉inline属性，给el-input包裹一层el-col,通过span属性设置宽度
html
<el-form :model="addDialogForm" :rules="addDialogRules" >
  <el-form-item prop="attr_name" :label="addTitle">
    <el-col :span="21">
    <el-input v-model="addDialogForm.attr_name" style="width:100%">
    </el-input>
    </el-col>
  </el-form-item>
</el-form>
<el-form :model="addDialogForm" :rules="addDialogRules" >
  <el-form-item prop="attr_name" :label="addTitle">
    <el-col :span="21">
    <el-input v-model="addDialogForm.attr_name" style="width:100%">
    </el-input>
    </el-col>
  </el-form-item>
</el-form>

限制el-input输入的数字只能输入小数点后XX位 ​

html
<el-input
  type="number"
  v-model="scope.row.number_"
  @input="handleInput_number_(scope.row, scope.$index)"
>
</el-input>
<el-input
  type="number"
  v-model="scope.row.number_"
  @input="handleInput_number_(scope.row, scope.$index)"
>
</el-input>
js
export default {
  methods:{
    handleInput_number_(row, index) {
      this.tableData[index].number_ = this.onlyNumOnePoint_2(row.number_)
    },
    onlyNumOnePoint_8(number_only) { // 限制输入小数点后8位
      return (
        '' +
          number_only // 第一步：转成字符串
            .replace(/[^\d^\.]+/g, '') // 第二步：把不是数字，不是小数点的过滤掉
            .replace(/^0+(\d)/, '$1') // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
            .replace(/^\./, '0.') // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
            .match(/^\d*(\.?\d{0,8})/g)[0] || ''
      ) // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，	而且小数点后面只能有0到2位小数
    },
    onlyNumOnePoint_2(number_only) { // 限制输入小数点后2位
      return (
        '' +
          number_only
            .replace(/[^\d^\.]+/g, '')
            .replace(/^0+(\d)/, '$1')
            .replace(/^\./, '0.')
            .match(/^\d*(\.?\d{0,2})/g)[0] || ''
      )
    },
  }
}
export default {
  methods:{
    handleInput_number_(row, index) {
      this.tableData[index].number_ = this.onlyNumOnePoint_2(row.number_)
    },
    onlyNumOnePoint_8(number_only) { // 限制输入小数点后8位
      return (
        '' +
          number_only // 第一步：转成字符串
            .replace(/[^\d^\.]+/g, '') // 第二步：把不是数字，不是小数点的过滤掉
            .replace(/^0+(\d)/, '$1') // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
            .replace(/^\./, '0.') // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
            .match(/^\d*(\.?\d{0,8})/g)[0] || ''
      ) // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，	而且小数点后面只能有0到2位小数
    },
    onlyNumOnePoint_2(number_only) { // 限制输入小数点后2位
      return (
        '' +
          number_only
            .replace(/[^\d^\.]+/g, '')
            .replace(/^0+(\d)/, '$1')
            .replace(/^\./, '0.')
            .match(/^\d*(\.?\d{0,2})/g)[0] || ''
      )
    },
  }
}

限制el-input只能输入负数 ​

html
<el-input
  type="number"
  v-model="scope.row.sl"
  @input="handleInput_sl(scope.row, scope.$index)"
></el-input>
<el-input
  type="number"
  v-model="scope.row.sl"
  @input="handleInput_sl(scope.row, scope.$index)"
></el-input>
js
export default {
  methods:{
      handleInput_sl(row, index) {
      // 数量
      // this.tableData_hzfpqrxx[index].sl = -Math.abs(
      //   this.onlyNumOnePoint_2(row.sl)
      // )
      function jsTrue(val) {
        if (val === '') return false
        else if (val === 0) return true
        else if (Object.is(val, NaN)) return false
        else if (val === 'NaN') return false
        else if (!val) return false
        else return true
      }
      if (!jsTrue(row.sl)) {
        this.tableData_hzfpqrxx[index].sl = ''
      } else {
        this.tableData_hzfpqrxx[index].sl = -Math.abs(
          this.onlyNumOnePoint_2(row.sl)
        )
      }
    },
    onlyNumOnePoint_2(number_only) {
      return (
        '' +
          number_only
            .replace(/[^\d^\.]+/g, '')
            .replace(/^0+(\d)/, '$1')
            .replace(/^\./, '0.')
            .match(/^\d*(\.?\d{0,2})/g)[0] || ''
      )
    },
  }
}
export default {
  methods:{
      handleInput_sl(row, index) {
      // 数量
      // this.tableData_hzfpqrxx[index].sl = -Math.abs(
      //   this.onlyNumOnePoint_2(row.sl)
      // )
      function jsTrue(val) {
        if (val === '') return false
        else if (val === 0) return true
        else if (Object.is(val, NaN)) return false
        else if (val === 'NaN') return false
        else if (!val) return false
        else return true
      }
      if (!jsTrue(row.sl)) {
        this.tableData_hzfpqrxx[index].sl = ''
      } else {
        this.tableData_hzfpqrxx[index].sl = -Math.abs(
          this.onlyNumOnePoint_2(row.sl)
        )
      }
    },
    onlyNumOnePoint_2(number_only) {
      return (
        '' +
          number_only
            .replace(/[^\d^\.]+/g, '')
            .replace(/^0+(\d)/, '$1')
            .replace(/^\./, '0.')
            .match(/^\d*(\.?\d{0,2})/g)[0] || ''
      )
    },
  }
}