3 Element Plus 表单组件

• Form 表单

• 表单校验

• 重置按钮

• 自定义校验规则

• 上传文件

3.1 Form 表单

表单包含输入框，单选框，下拉选择，多选框等用户输入的组件。使用表单，可以收集、验证和提交数据

表单常用组件：

• el-input：输入框

• el-select：下拉选择框

• el-checkbox-group：多选框

• el-switch：开关

• el-radio-group：单选框

参考文档：https://element-plus.gitee.io/zh-CN/component/form.html

1 编写 form.vue 文件

<template>
<!-- 最外层是一个 el-form ，:model="form" 用来与下面字段进行绑定从而实现双向绑定 -->
  <el-form :model="form" label-width="120px">
<!-- 然后是 el-form-item 然后再里面放入我们需要的组件，比如这里的 el-input 输入框-->
    <el-form-item label="Activity name">
      <el-input v-model="form.name" />
    </el-form-item>
<!-- 这里又是一个 el-form-item 然后里面嵌套了一个 el-selec 选择器 -->
    <el-form-item label="Activity zone">
      <el-select v-model="form.region" placeholder="please select your zone">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item label="Instant delivery">
      <el-switch v-model="form.delivery" />
    </el-form-item>
    <el-form-item label="Activity type">
      <el-checkbox-group v-model="form.type">
        <el-checkbox label="Online activities" name="type" />
        <el-checkbox label="Promotion activities" name="type" />
        <el-checkbox label="Offline activities" name="type" />
        <el-checkbox label="Simple brand exposure" name="type" />
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="Activity form">
      <el-input v-model="form.desc" type="textarea" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">Create</el-button>
      <el-button>Cancel</el-button>
    </el-form-item>
  </el-form>
</template>

<script >
 export default {
   // 定义默认值，用于上面 form 切片中的值
   data() {
    return {
      form: {
        name:'',
        region:'',
        delivery:'',
        type:[],
      }
    }
   }
 }
</script>

2 添加路由 index.js 文件，导入 form.vue

3 浏览器访问

3.2 表单校验

表单效验，用于检查表单输入是否合法。如果不合法就提交不了，如果合法就可以提交

用法：

• ref：绑定控件

• prop：model的键名，在做表单字段校验时必填项

• rules 校验规则：定义校验规则，其中 trigger 中 blur 为失去焦点提示，change为值变化提示

• 提交表单验证：通过$refs获取控件，根据rules校验数据是否符合规则，若符合，执行自定义方法

参考文档：https://element-plus.gitee.io/zh-CN/component/form.html#%E8%A1%A8%E5%8D%95%E6%A0%A1%E9%AA%8C

1 创建 validate.vue 文件，这里直接复用上面 form.vue 中的代码，并作以修改

<template>
  <!-- ref="form" 绑定条件为来自 form 的控件， :rules="rules" 校验规则  -->
  <el-form ref="form" :rules="rules" :model="form" label-width="120px">
    <!-- prop="name" 也就是让 prop 找到 form 中对应的 name 字段,然后该字段就变成 rules 需要校验的数据 -->
    <el-form-item label="Activity name" prop="name">
      <el-input v-model="form.name" />
    </el-form-item>
    <!-- prop="region" 也就是让 prop 找到 form 中对应的 region 字段 -->
    <el-form-item label="Activity zone" prop="region">
      <el-select v-model="form.region" placeholder="please select your zone">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item label="Instant delivery" >
      <el-switch v-model="form.delivery" />
    </el-form-item>
    <el-form-item label="Activity type" >
      <el-checkbox-group v-model="form.type">
        <el-checkbox label="Online activities" name="type" />
        <el-checkbox label="Promotion activities" name="type" />
        <el-checkbox label="Offline activities" name="type" />
        <el-checkbox label="Simple brand exposure" name="type" />
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="Activity form">
      <el-input v-model="form.desc" type="textarea" />
    </el-form-item>
    <el-form-item>
<!-- @click="submitForm('form') 这里填入的 form 就是在 ref="form" 那的 form -->
      <el-button type="primary" @click="submitForm('form')">Create</el-button>
      <el-button>Cancel</el-button>
    </el-form-item>
  </el-form>
</template>

<script >
export default {
  // 定义默认值，用于上面 form 切片中的值
  data() {
    return {
      form: {
        name:'',
        region:'',
        delivery:'false',
        type:[],
      },
      // 定义 rules 数组，这个数组里面都是对应的规则
      rules: {
          // 对 name 字段定义规则
          name: [
              // required: true 这就表示对应的字段在 wbe 中是一个必填项
              // message：是提示信息
              // trigger: 'blur' 是表单中的值是否发生变化，发生变化就不提示，如果没有发生变化就提示
            { required: true, message: '请输入活动名称', trigger: 'blur' },
              // min: 3, max: 5 名字最大数和最小数
            { min: 3, max: 5, message: '请将长度控制在 3 到 5', trigger: 'blur' },
          ],
          // 对 region 字段定义规则
          region: [
            {
              // required: true 这就表示对应的字段在 wbe 中是一个必填项
              required: true,
              message: '请选择活动区域',
              trigger: 'change',
            },
          ],
        }
    }
  },
  methods: {
    submitForm(formName) {
      // 这里通过获取 form 中的控件，然后在 validate 中验证 rules 规则是否与 prop 中的对应匹配成功，并返回 true 和 false
      this.$refs[formName].validate((valid)=> {
        // 如果为 true 表示验证没有问题
        if(valid) {
          alert('submit!');
          // 如果是 false 就会在 console 中输出 error submit
        } else {
          console.log('error submit');
          return false
        }
      });
    }
  },
}
</script>

2 添加路由修改 index.js 文件

3 这里我直接点击 create 提交就会直接报错，而且也会在 console.log 中输出

4 浏览器访问这里我name 字段中输入超过了 5 个字符就提示我们长度错误

3.3 重置按钮

Form重置按钮方法：

1、validate：对整个表单的内容进行验证，参数为一个回调函数，该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段

2、resetFields：对整个表单进行重置，将所有字段值重置为初始值并移除校验结果，类似于直接还原

参考文档：https://element-plus.gitee.io/zh-CN/component/form.html

1 创建 reset.vue 文件

<template>
  <!-- ref="form" 绑定条件为来自 form 的控件， :rules="rules" 校验规则  -->
  <el-form ref="form" :rules="rules" :model="form" label-width="120px">
    <!-- prop="name" 也就是让 prop 找到 form 中对应的 name 字段,然后该字段就变成 rules 需要校验的数据 -->
    <el-form-item label="Activity name" prop="name">
      <el-input v-model="form.name" />
    </el-form-item>
    <!-- prop="region" 也就是让 prop 找到 form 中对应的 region 字段 -->
    <el-form-item label="Activity zone" prop="region">
      <el-select v-model="form.region" placeholder="please select your zone">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item label="Instant delivery" >
      <el-switch v-model="form.delivery" />
    </el-form-item>
    <el-form-item label="Activity type" >
      <el-checkbox-group v-model="form.type">
        <el-checkbox label="Online activities" name="type" />
        <el-checkbox label="Promotion activities" name="type" />
        <el-checkbox label="Offline activities" name="type" />
        <el-checkbox label="Simple brand exposure" name="type" />
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="Activity form">
      <el-input v-model="form.desc" type="textarea" />
    </el-form-item>
    <el-form-item>
      <!-- @click="submitForm('form') 这里填入的 form 就是在 ref="form" 那的 form -->
      <el-button type="primary" @click="submitForm('form')">Create</el-button>
<!-- 定义 reset 按钮 @click="resetForm('form') 填写在 ref="form" 进行调用 -->
      <el-button type="warning" @click="resetForm('form')">Reset</el-button>
    </el-form-item>
  </el-form>
</template>

<script >
export default {
  // 定义默认值，用于上面 form 切片中的值
  data() {
    return {
      form: {
        name:'',
        region:'',
        delivery:'false',
        type:[],
      },
      // 定义 rules 数组，这个数组里面都是对应的规则
      rules: {
        // 对 name 字段定义规则
        name: [
          // required: true 这就表示对应的字段在 wbe 中是一个必填项
          // message：是提示信息
          // trigger: 'blur' 是表单中的值是否发生变化，发生变化就不提示，如果没有发生变化就提示
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          // min: 3, max: 5 名字最大数和最小数
          { min: 3, max: 5, message: '请将长度控制在 3 到 5', trigger: 'blur' },
        ],
        // 对 region 字段定义规则
        region: [
          {
            // required: true 这就表示对应的字段在 wbe 中是一个必填项
            required: true,
            message: '请选择活动区域',
            trigger: 'change',
          },
        ],
      }
    }
  },
  methods: {
    submitForm(formName) {
      // 这里通过获取 form 中的控件，然后在 validate 中验证 rules 规则是否与 prop 中的对应匹配成功，并返回 true 和 false
      this.$refs[formName].validate((valid)=> {
        // 如果为 true 表示验证没有问题
        if(valid) {
          alert('submit!');
          // 如果是 false 就会在 console 中输出 error submit
        } else {
          console.log('error submit');
          return false
        }
      });
    },
    // 定义 resetForm 方法。
    resetForm(formName) {
      this.$refs[formName].resetFields();
      console.log(this.form)
    }
  },
}
</script>

2 创建路由编写 index.js 文件

3 浏览器演示

这里我填入 123 和已经选择了对应的数据，但是当我点击了 reset 之后就会看到立即将对应的数据刷新并清除，在 console 中都将这些对象定义为了默认值

3.4 自定义校验规则

使用场景：

所谓的自定义校验规则，比如就是在我们的网站中需要指定用户在注册的时候填写对应的邮箱才能注册

自定义效验规则用法：

1、rules定义validator，传入自定义方法

2、定义validator的方法箭头函数，入参为rule，value和callback

rule：匹配到的规则，一般用不到

value：校验的值

callback：回调函数，没有入参表示通过校验，类似return true

参考文档：https://element-plus.gitee.io/zh-CN/component/form.html

1 编辑 custom_validate.vue 文件

<template>
  <!-- ref="form" 绑定条件为来自 form 的控件， :rules="rules" 校验规则  -->
  <el-form ref="form" :rules="rules" :model="form" label-width="120px">
    <!-- prop="name" 也就是让 prop 找到 form 中对应的 name 字段,然后该字段就变成 rules 需要校验的数据 -->
    <el-form-item label="Activity name" prop="name">
      <el-input v-model="form.name" />
    </el-form-item>
    <!-- prop="region" 也就是让 prop 找到 form 中对应的 region 字段 -->
    <el-form-item label="Activity zone" prop="region">
      <el-select v-model="form.region" placeholder="please select your zone">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item label="Instant delivery" >
      <el-switch v-model="form.delivery" />
    </el-form-item>
    <el-form-item label="Activity type" >
      <el-checkbox-group v-model="form.type">
        <el-checkbox label="Online activities" name="type" />
        <el-checkbox label="Promotion activities" name="type" />
        <el-checkbox label="Offline activities" name="type" />
        <el-checkbox label="Simple brand exposure" name="type" />
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="Activity form">
      <el-input v-model="form.desc" type="textarea" />
    </el-form-item>
    <el-form-item>
      <!-- @click="submitForm('form') 这里填入的 form 就是在 ref="form" 那的 form -->
      <el-button type="primary" @click="submitForm('form')">Create</el-button>
      <el-button>Cancel</el-button>
    </el-form-item>
  </el-form>
</template>

<script >
export default {
  // 定义默认值，用于上面 form 切片中的值
  data() {
    // 定义 validateName 变量，分别是 rule、value、callback 三个参数
    var validateName = (rule , value, callback) => {
      // 如果 value 不等于 aaa 那么就触发 callback 函数
      if (value != 'aaa') {
        callback( new Error("name 不是 aaa"))
        // 如果是 aaa 直接调用 callback 函数并且什么都不用写
      } else{
        callback()
      }
    }
    return {
      form: {
        name:'',
        region:'',
        delivery:'false',
        type:[],
      },
      // 定义 rules 数组，这个数组里面都是对应的规则
      rules: {
        // 对 name 字段定义规则，直接调用 validator 函数
        name: [
            // validator 自定义方法该方法名为 validateName，触发条件 blur
          {validator: validateName, trigger: 'blur'}
        ],
        // 对 region 字段定义规则
        region: [
          {
            // required: true 这就表示对应的字段在 wbe 中是一个必填项
            required: true,
            message: '请选择活动区域',
            trigger: 'change',
          },
        ],
      }
    }
  },
  methods: {
    submitForm(formName) {
      // 这里通过获取 form 中的控件，然后在 validate 中验证 rules 规则是否与 prop 中的对应匹配成功，并返回 true 和 false
      this.$refs[formName].validate((valid)=> {
        // 如果为 true 表示验证没有问题
        if(valid) {
          alert('submit!');
          // 如果是 false 就会在 console 中输出 error submit
        } else {
          console.log('error submit');
          return false
        }
      });
    }
  },
}
</script>

2 添加路由

3 浏览器访问，这里我在 name 字段输入的是 bbb 可以看到直接由 validateName 函数中的 callback 返回，如果输入 aaa 那么直接通过并不会报错

3.5 上传文件

通过点击或者拖拽上传文件。

常用属性：

• action：必选参数，上传的地址

• multiple：是否支持多选文件

• drag：是否启动拖拽上传

• on-remove：文件列表移除文件时的钩子

• on-success：文件上传成功时的钩子

• on-error：文件上传失败时的钩子

• on-preview：点击文件列表中已上传的文件的钩子

• file-list：默认上传文件列表

• list-type：文件列表的类型，text/picture/picture-card

• limit：允许上传文件的最大数量

参考文档：https://element-plus.gitee.io/zh-CN/component/upload.html

1 创建编辑 upload.vue 文件

<template>
  <!-- action 后端上传地址 -->
  <!-- on-success on-remove 文件上传时调用的方法 -->
  <el-upload
      class="upload-demo"
      :file-list="fileList"
      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
      :on-success="handleSuccess"
      :on-remove="handleRemove"
      list-type="picture"
  >
    <el-button type="primary">Click to upload</el-button>
<!-- tip 插槽小提示 -->
    <template #tip>
      <div class="el-upload__tip">
        jpg/png files with a size less than 500KB.
      </div>
    </template>
  </el-upload>
</template>

<script>
export default {
  data() {
    return{
      // 已经的上传文件列表
    fileList: [
      {
        name: 'element-plus-logo.svg',
        url: 'https://element-plus.org/images/element-plus-logo.svg',
      },
      {
        name: 'element-plus-logo2.svg',
        url: 'https://element-plus.org/images/element-plus-logo.svg',
      },
      ]
    }
    },
  // 调用 handleRemove 方法，将文件删除并在 console 中输出
  methods: {
    handleRemove(file,fileList) {
      console.log(file,fileList)
    }
  }
}
</script>

2 添加路由

3 浏览器访问点击 click to update 就是上传

4 浏览器删除文件

4 Element Plus 数据表格

• 边框、高度、固定列

• 单选、多选

• 排序

• 搜索

• 自定义列模板

• 分页

4.1 Table表格-边框、高度、固定列

table 一般用于展示各类信息，以表格化的方式进行渲染

用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

Table 属性：

• border：是否带有纵向边框，就是竖着的一条一条的

• height：Table的高度，默认为自动高度 height="200"

• data：表格使用的数组数据

列属性：

• prop：这一列中的值的键名

• label：列名

• width：列的宽度

• fixed：列是否固定在左侧或者右侧，true表示固定在左侧 fixed="right"

参考文档：https://element-plus.gitee.io/zh-CN/component/table.html

1 编写 table.vue 文件

<template>
<!-- 加上对应的阴影并且内间距为 0 用于美观 -->
  <el-card shadow="never" :body-style="{padding:'0px'}">
  <!-- :data="tableData" 需要绑定双向数据，并渲染至前端 style="width: 100% 表格的宽度 -->
    <el-table :data="tableData" style="width: 100%">
  <!-- label="Date" 就是表头每一列的名字，prop="date" 就是实际的数据，width="180" 就是该列表的宽度-->
      <el-table-column prop="date" label="Date" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="address" label="Address" />
    </el-table>
  </el-card>
</template>

<!-- 绑定数据 -->
<script>
  export default {
    data() {
      return {
        // 绑定一个数组，因为 table 他是有多条数据，并且每条数据都是对应的数组元素
        tableData :[
          {
            date: '2016-05-03',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
          },
          {
            date: '2016-05-02',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
          },
          {
            date: '2016-05-04',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
          },
          {
            date: '2016-05-01',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
          },
        ]
      }
    }
  }
</script>

2 index.js 添加路由

3 浏览器访问

4.2 Table表格-单选、多选

单选语法：

1、配置 highlight-current-row 属性

2、由current-change事件来管理选中时的触发事件，它会传入currentRow，oldCurrentRow。

多选语法：

1、添加el-table-column，设置type属性为selection

2、由selection-change事件来管理选中时的触发事件，它会传入row。

4.2.1 单选框

在单选框中需要添加下面两个属性字段：

• highlight-current-row
• current-change

参考文档：https://element-plus.gitee.io/zh-CN/component/radio.html

1 编写 selection.vue 文件

<template>
  <!-- 加上对应的阴影并且内间距为 0 用于美观 -->
  <el-card shadow="never" :body-style="{padding:'0px'}">
    <!-- highlight-current-row 表示需要使用到单选框，
    @current-change="handleSelection" 绑定 handleselection 方法用于触发事件
    :data="tableData" 需要绑定双向数据，
    并渲染至前端 style="width: 100% 表格的宽度 -->
    <el-table
        highlight-current-row
        @current-change="handleSelection"
        :data="tableData"
        style="width: 100%">
      <!-- label="Date" 就是表头每一列的名字，prop="date" 就是实际的数据，width="180" 就是该列表的宽度-->
      <el-table-column prop="date" label="Date" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="address" label="Address" />
    </el-table>
  </el-card>
</template>

<!-- 绑定数据 -->
<script>
export default {
  data() {
    return {
      // 绑定一个数组，因为 table 他是有多条数据，并且每条数据都是对应的数组元素
      tableData :[
        {
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-02',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-04',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
      ]
    }
  },
  // 定义 handleSelection 方法
  methods: {
    // currenRow 表示新的一行，oldCurrentRow 表示旧的一行
    handleSelection(currentRow,oldCurrentRow) {
      console.log("currentRow",currentRow)
      console.log("oldCurrentRow",oldCurrentRow )
    }
  }
}
</script>

2 添加路由

3 浏览器访问，随便点击一条数据就可以在 console 中看到对应的数据，oldCurrentRow 之所以是 null 是因为我上一个都没有点击任何数据

4.2.2 多选框

在多选框中需要添加下面两个属性字段：

• 添加el-table-column，设置 type 属性为 selection
• 由 selection-change 事件来管理选中时的触发事件，它会传入 row。

参考文档：https://element-plus.gitee.io/zh-CN/component/checkbox.html

1 编辑 multi_selection 文件

<template>
  <!-- 加上对应的阴影并且内间距为 0 用于美观 -->
  <el-card shadow="never" :body-style="{padding:'0px'}">
    <!-- @selection-change="handleSelection" 用于多选绑定
    :data="tableData" 需要绑定双向数据，
    并渲染至前端 style="width: 100% 表格的宽度 -->
    <el-table
        :data="tableData"
        @selection-change="handleSelection"
        style="width: 100%">
<!-- <el-table-column type="selection"> 设置多选框 -->
      <el-table-column type="selection"></el-table-column>
      <!-- label="Date" 就是表头每一列的名字，prop="date" 就是实际的数据，width="180" 就是该列表的宽度-->
      <el-table-column prop="date" label="Date" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="address" label="Address" />
    </el-table>
  </el-card>
</template>

<!-- 绑定数据 -->
<script>
export default {
  data() {
    return {
      // 绑定一个数组，因为 table 他是有多条数据，并且每条数据都是对应的数组元素
      tableData :[
        {
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-02',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-04',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
      ]
    }
  },
  // 定义 handleSelection 方法 用于绑定多选框的方法
  methods: {
    handleSelection(rows){
      console.log(rows)
    }
  }
}
</script>

2 在 index.js 中创建路由

3 浏览器访问，可以看到多了有方框，然后当我们点击的时候就会出现有对勾以及在 console 中就会输出选择的这些数据信息

一般场景就是当我们多选这些的时候对应的表单需要实现批量删除、批量修改的时候使用，比如公有云上的批量关机就是这种操作

4.3 Table表格-排序

对表格进行排序，可快速查找或对比数据。

• 在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。
• 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
• 使用 sort-method 或者 sort-by 使用自定义的排序规则。
• 使用 sort-change 监听排序变更事件，在事件回调中可以获取当前排序字段名和排序顺序。

参考文档：https://element-plus.gitee.io/zh-CN/component/table.html

排序规则一般针对于日期、和 id 这种是可以排序的

1 编写 sortable.vue 文件，这里我需要对日期进行排序

<template>
  <!-- 加上对应的阴影并且内间距为 0 用于美观 -->
  <el-card shadow="never" :body-style="{padding:'0px'}">
    <!-- :data="tableData" 需要绑定双向数据，并渲染至前端 style="width: 100% 表格的宽度 -->
    <el-table :data="tableData" style="width: 100%">
<!-- 这里我将 sortable 添加到 date 中从而实现对时间的排序 -->
      <el-table-column prop="date" label="Date" width="180" sortable />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="address" label="Address" />
    </el-table>
  </el-card>
</template>

<!-- 绑定数据 -->
<script>
export default {
  data() {
    return {
      // 绑定一个数组，因为 table 他是有多条数据，并且每条数据都是对应的数组元素
      tableData :[
        {
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-02',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-04',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
      ]
    }
  }
}
</script>

2 index.js 添加路由

3 浏览器访问，点击向上的箭头时间就会按小排到大，如果点击向下的箭头则相反

4.4 Table表格-搜索

对表格进行搜索和过滤，可快速查找数据。

1、设置自定义表头，添加in-input搜索栏

2、data属性使用filter函数把input输入的关键字进行过滤

参考文档：https://element-plus.gitee.io/zh-CN/component/table.html

1 编写 search.vue 文件

<template>
<!-- 绑定下面的 tableData 数据
 filter 过滤函数，data 的值就是 tabledata ，=> !search 就是将 tabledata 搜索的内容进行搜索,
 如果也就是说 search 搜索关键字为空的话或者没有对应的搜索字段那么就不会执行后面函数，而直接返回 data
 如果有搜索内容的话就会将返回 data 中的 name 字段进行返回，如果不包含就不会返回，这里是一个 for 循环
-->
  <el-table
      :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"      style="width: 100%">
    <el-table-column label="Date" prop="date" />
    <el-table-column label="Name" prop="name" />
    <el-table-column align="right">
      <!-- 插槽插入一个搜索框  v-model="search" 使用搜索模式 -->
      <template #header>
        <el-input v-model="search" size="small" placeholder="Type to search" />
      </template>
        <!-- 两个按钮分别是 edit 和 Delete  -->
        <el-button size="small">Edit</el-button>
        <el-button size="small" type="danger">Delete</el-button>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      // 绑定一个数组，因为 table 他是有多条数据，并且每条数据都是对应的数组元素
      tableData :[
        {
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-02',
          name: 'Jay',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-04',
          name: 'Mote',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-01',
          name: 'HAle',
          address: 'No. 189, Grove St, Los Angeles',
        }],
      search:''
    }
  }
}
</script>

2 修改 index.vue 添加路由

3 浏览器访问，这里可以看到有 4 个用户并且右上角有一个搜索框

4 我这里在搜索框中搜索 j 可以看到将 jay 显示

4.5 Table表格-自定义列模板

自定义列的显示内容，可组合其他组件使用。

通过 slot 可以获取到 row，column，$index 和 store（table内部的状态管理）的数据。

参考文档：https://element-plus.gitee.io/zh-CN/component/table.html

1 编写 custom_column.vue 文件

<template>
  <!-- 加上对应的阴影并且内间距为 0 用于美观 -->
  <el-card shadow="never" :body-style="{padding:'0px'}">
    <!-- :data="tableData" 需要绑定双向数据，并渲染至前端 style="width: 100% 表格的宽度 -->
    <el-table :data="tableData" style="width: 100%">
      <!-- label="Date" 就是表头每一列的名字，prop="date" 就是实际的数据，width="180" 就是该列表的宽度-->
      <el-table-column prop="date" label="Date" width="180" >
        <!-- 添加插槽并且将数据进行组装 -->
        <template #default="metadata">
          <div style="display: flex; align-items: center">
            <!--
            加图标并加时间
            然后从 {{ metadata.row.date }} 获取到的 date 字段 type 为 warning
            页面上会显示为黄色
            {{ metadata.row.date }} 里面其实可以用于技术等操作
             -->
            <el-icon><timer /></el-icon>
            <el-tag  type="warning">{{ metadata.row.date }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="address" label="Address" />
    </el-table>
  </el-card>
</template>

<!-- 绑定数据 -->
<script>
export default {
  data() {
    return {
      // 绑定一个数组，因为 table 他是有多条数据，并且每条数据都是对应的数组元素
      tableData :[
        {
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-02',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-04',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        }],
    }
  }
}
</script>

2 编写 index.js 添加路由

3 浏览器访问，可以看到这里就有时钟的图标和字体已经变为了黄色并是一个 tag

4.6 Table表格-分页

分页属性：

• background：是否为分页按钮添加背景色

• page-size：每页显示条目个数

• total：总条目数

• current-page：当前页数

• page-sizes：每页显示个数选择器的选项设置

• size-change：pagesize改变时触发

• current-change：currentpage改变时触发

参考文档：https://element-plus.gitee.io/zh-CN/component/pagination.html

1 编写 pagination.vue 文件

<template>
<!--
  :page-sizes="[10, 20, 30, 40]" 每页分别展示多少数据
  :total="40" 总共 40 页
  background 加深颜色
  layout 功能点：
    total 总行数
    sizes 总大小
    prev
    pager 上一页
    next 下一页
    jumper 跳转
  @size-change="handleSizeChange" 页面变化的时候触发什么
  @current-change="handleCurrentChange" 某一页变化的时候触发什么
-->
    <el-pagination
        :currentPage="currentPage"
        :page-size="pageSize4"
        :page-sizes="[10, 20, 30, 40]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="40"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
</template>

<script>
  export default {
    data(){
      return {
        currentPage: 1,
        pageSize: 10,
      }
    },
    // 定义handleSizeChange 方法，从后端接口获取列表数据，传入 pagesize 和 currentpage ，后端会自动分页
    methods: {
      handleSizeChange(pageSize) {
        // 这里将 handleSizeChange 中定义 pageSize，赋值给 data 中的 pageSize
        this.pageSize = pageSize
      },
      // 这里将 handleCurrentChange 中定义 currentPage，赋值给 data 中的 currentPage
      handleCurrentChange(currentPage) {
        this.currentPage = currentPage
      }
    }
  }
</script>

2 注册路由 index.js 文件

3 浏览器访问，选择 10 个为一页分别是 40 页

点击 40 个为一页可以看到只有 1 页

5 Element Plus 反馈组件

• 消息提示

• 对话框

• 确认弹出框

消息提示

所谓的反馈组件就是用户与前端页面的一个交互，比如我提交一个表单，比如我登录成功之后就会提示登录成功的这么一个小标签，这就是一种反馈之一

对话框

还有一种对话框就是配合表单一起使用做一些账号注册，实例对象的创建比如 pod、deployment 的创建等

确认弹出框

一般用于资源放置删除之类的时候用于二次确定，以避免误删除操作

5.1 消息提示

不同状态#

用来显示「成功、警告、消息、错误」类的操作反馈。

当需要自定义更多属性时，Message 也可以接收一个对象为参数。 比如，设置 type 字段可以定义不同的状态，默认为info。 此时正文内容以 message 的值传入。 同时，我们也为 Message 的各种 type 注册了方法，可以在不传入 type 字段的情况下像 open4 那样直接调用。

常用于主动操作后的反馈提示，如axios请求根据响应结果提示。

从顶部出现，3秒后自动消失。

常用属性：

• type：类型

• message：提示内容

• center：文字居中，值为true或false

参考文档：https://element-plus.gitee.io/zh-CN/component/message.html

1 编辑 message.vue 文件

<template>
<!--
   调用下面不同的方法
 -->
  <el-button :plain="true" @click="open2">成功</el-button>
  <el-button :plain="true" @click="open3">警告</el-button>
  <el-button :plain="true" @click="open1">消息</el-button>
  <el-button :plain="true" @click="open4">错误</el-button>
</template>

<script>
export default {
  methods: {
    open1() {
      this.$message('这是一条消息提示');
    },
    open2() {
      this.$message({
        message: '恭喜你，这是一条成功消息',
        type: 'success',
        // center: true 居中
        center: true
      });
    },

    open3() {
      this.$message({
        message: '警告哦，这是一条警告消息',
        type: 'warning'
      });
    },

    open4() {
      this.$message.error('错了哦，这是一条错误消息');
    }
  }
}
</script>

2 添加 index.js 路由

3 浏览器访问，可以看到点击之后有不同的消息提示

5.2 对话框

Dialog 弹出一个对话框，适合需要定制型更大的场景，如：表单的提交，以及按钮的重复确认框等。

常用属性：

• v-model：boolean 值，决定显示与隐藏。

• title：对话框的顶部标题内容

• befor-close：对话框关闭的出发事件

• width：对话框宽度，一般以百分比定义

• center：是否居中

参考文档：https://element-plus.gitee.io/zh-CN/component/dialog.html

使用场景：

1. 用于操作确定以及检查
2. 配合 form 表单进行创建，因为对话框是一个创建的按钮也就是当我们点击之后才会填写对应的 form 表单并实现提交，最后在调用后端 post 接口进行创建

这里我通过场景二来举例：

1 编写 dialog.vue 文件

<template>
<!-- form 表单提交流程：
打开创建按钮-> 然后填入 dialog 中的表单数据-> 校验数据-> 调用后端接口创建-> reset 重置 form 数据 
-->

<!--
这里是绑定一个 button 按钮
 -->
  <el-button type="primary" @click="dialogFormVisible = true"
  >创建</el-button
  >
<!--
 v-model="dialogFormVisible"  绑定一个 true、false 的值，作用是显示和隐藏 dialog
 而且这个默认值一定是 false，因为只有点击之后才会显示
 -->
  <el-dialog v-model="dialogFormVisible" title="Shipping address">
<!--
绑定下面的 form 表单，字段分别是 name、region
 -->
    <el-form :model="form">
      <el-form-item label="Promotion name" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="Zones" :label-width="formLabelWidth">
        <el-select v-model="form.region" placeholder="Please select a zone">
          <el-option label="Zone No.1" value="shanghai" />
          <el-option label="Zone No.2" value="beijing" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
        >Confirm</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        // 这里将默认值设置为 false
        dialogFormVisible: false,
        // 定义 form 默认值
        form: {
          name: '',
          region: '',
        }
      }
    }
  }
</script>

2 添加 index.js 路由

3 浏览器演示，可以看到当我们点击创建之后就会弹出一个表单

5.3 确认弹出框

Popconfirm点击元素弹出一个简单的气泡确认框。

常用属性：

• confirm-button-text：确认按钮文本
• cancel-button-text：取消按钮文本
• icon：图标
• icon-color：图标颜色
• title：气泡确认框内的文本
• @confirm：自定义确认按钮方法
• @cancel：自定义取消按钮方法

参考文档：https://element-plus.gitee.io/zh-CN/component/popconfirm.html

图标地址：https://element-plus.gitee.io/zh-CN/component/icon.html#%E5%9B%BE%E6%A0%87%E9%9B%86%E5%90%88

1 编写 popconfirm.vue 文件

<template>
<!--
 confirm-button-text="OK" 点击确定时候的提示 ok
 cancel-button-text="No, Thanks" 点击取消的提示 No, Thanks
 :icon="InfoFilled" 提示内容的图标
 icon-color="red" 提示内容的图标颜色
 title="你确定要删除?" 提示的内容
 @confirm="handleConfirm" 确认按钮方法,也就是确定之后的动作
 cancel="handleCancel" 取消按钮方法,也就是取消之后的动作
-->
  <el-popconfirm
      confirm-button-text="确定"
      cancel-button-text="取消"
      icon="CircleCloseFilled"
      icon-color="red"
      title="你确定要删除?"
      @confirm="handleConfirm"
      @cancel="handleCancel"
  >
    <template #reference>
      <el-button>Delete</el-button>
    </template>
  </el-popconfirm>
</template>

<script>
export  default {
  methods: {
    handleConfirm() {
      console.log("自定义确认按钮方法")
    },
    handleCancel() {
      console.log("自定义取消按钮方法")
    },
  }
}

</script>

2 index.js 添加路由

3 浏览器点击访问并点击确定调用 handleConfirm() 方法，console 提示

4 浏览器点击访问并点击取消调用 handleCancel() 方法，console 提示