z-element-ui

# 文本模式

# 介绍

该模式通过 span 标签实现,

# 使用

通过传递 textModel 开启文本模式,如果需要单独设置文本模式,将其加入 items 中需要设置的字段即可.

如果需要对显示的数据进行格式话,在 items 中传递 format 方法进行格式化.

点击查看代码 
<!-- @format -->

<template>
  <div>
    <el-button type="success" plain @click="checkType" style="margin-bottom: 20px"> 切换模式 </el-button>
    <z-grid-form v-model="form" :rules="rules" :items="formList" label-width="140px" ref="zTextModelForm" :textModel="textModel"> </z-grid-form>
  </div>
</template>
<script>
export default {
  name: 'zTextModelFormDemo',
  data() {
    return {
      form: { check_in: '9:30' },
      textModel: false,
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
        ]
      },
      formList: [
        {
          prop: 'age',
          label: '年龄',
          render: ({ vmodel }) => {
            console.log(vmodel, this.form);
            return <el-input v-model={vmodel.age} placeholder="请输入年龄" />;
          },
          format: ({ value }) => {
            return (
              <div style={{ fontWeight: 600 }}>
                年龄是 <span class={'text-red'}>{value}</span> ,而且我使用了jsx
              </div>
            );
          },
          class: 'border'
        },
        {
          prop: 'check_in',
          render: 'el-time-select',
          label: '使用el-time-select',
          class: 'border',
          span: 12,
          format: ({ value }) => {
            return `现在的时间是${value}`;
          },
          option: {
            'picker-options': {
              start: '08:30',
              step: '00:15',
              end: '10:30'
            },
            class: 'text-red',
            style: { width: '100%' },
            placeholder: '选择打卡时间1'
          }
        }
      ]
    };
  },
  methods: {
    checkType() {
      this.textModel = !this.textModel;
    }
  }
};
</script>
<style scoped>
.example {
  margin-bottom: 10px;
  float: right;
}
</style>

注意

在文字模式下,如果form中不存在对应的值则什么都不会显示.

name description type
textModel 控制文本模式的开关,可以进行局部控制 (items中传递) 和全局控制 (作为属性传递给form表单) Boolean
format 当数据格式特殊时,在items中传递此方法.
此方法在通常情况下接受两个参数,在动态表单的情况下接受四个参数.		 ( value,index,row?,rowIndex ) => ( vnode | string )

← 插槽 →