<template>
  <table class="demo-table">
    <tbody>
      <tr>
        <td class="demo-label">
          Default
        </td>
        <td>
          <ElInput
            size="medium"
            placeholder="Placeholder Text"
          />
        </td>
      </tr>
      <tr>
        <td class="demo-label">
          Disabled
        </td>
        <td>
          <ElInput
            size="medium"
            :disabled="true"
            placeholder="Placeholder Text"
          />
        </td>
      </tr>
      <tr>
        <td class="demo-label">
          Error
        </td>
        <td>
          <ElForm
            ref="errorForm"
            :model="errorForm"
            :rules="errorFormRules"
          >
            <ElFormItem
              prop="value1"
            >
              <ElInput
                v-model="errorForm.value1"
                size="medium"
              />
            </ElFormItem>
          </ElForm>
        </td>
      </tr>
      <tr>
        <td class="demo-label">
          Input Prepend
        </td>
        <td>
          <ElInput>
            <template slot="prepend">
              https://
            </template>
          </ElInput>
        </td>
      </tr>
      <tr>
        <td class="demo-label">
          Prepend, Disabled
        </td>
        <td>
          <ElInput
            :disabled="true"
          >
            <template slot="prepend">
              https://
            </template>
          </ElInput>
        </td>
      </tr>
      <tr>
        <td class="demo-label">
          Input Append
        </td>
        <td>
          <ElInput>
            <template slot="append">
              .pdf
            </template>
          </ElInput>
        </td>
      </tr>
      <tr>
        <td class="demo-label">
          Append, Disabled
        </td>
        <td>
          <ElInput
            :disabled="true"
          >
            <template slot="append">
              .pdf
            </template>
          </ElInput>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
  export default {
    name: 'ExampleTextFields',
    data: () => ({
      errorForm: {
        value1: 'Active Text',
      },
      errorFormRules: {
        value1: [
          { required: true, message: 'In-line error text', trigger: 'blur' },
          {
            min: 1, max: 2, message: 'In-line error text', trigger: 'blur',
          },
        ],
      },
    }),
  };
</script>
