vue + Element ui 常用的组件和方法

弹出框

Dialog对话框

1.点空白地方触发事件  handleClose（）使用before-close绑定
2.点击空白关闭弹出框  done()
3. 提示文字          title
4. 是否使用点击空白关闭弹出框 close-on-click-modal =“布尔值”
5. 关闭时是否销毁里面的元素 destroy-on-close=“布尔值”
6. show-close=布尔值  取消或显示右上的X

<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>

<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <span>这是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

<script>
  export default {
    data() {
      return {
        dialogVisible: false
      };
    },
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  };
</script>

通常会有需求，在关闭弹框后需要清空填写的数据，这时候就需要关闭事件了

<el-dialog title="标题" :visible.sync="bind" size="small" @close='closeDialog'>
</el-dialog>

 //关闭弹框的事件
    closeDialog(){
      this.xxx = '';//清空数据
    },

Upload 上传

常用的属性

1.action 必选参数，上传的地址
2.headers	设置上传的请求头部
3.multiple	是否支持多选文件
4.data	上传时附带的额外参数
5.name	上传的文件字段名
6.show-file-list	是否显示已上传文件列表
7.drag	是否启用拖拽上传
8.accept	接受上传的文件类型（thumbnail-mode 模式下此参数无效）
9.limit	最大允许上传个数
10.tip	提示说明文字
11.clearFiles	清空已上传的文件列表（该方法不支持在 before-upload 中调用）

常用的钩子

1.on-preview	点击文件列表中已上传的文件时的钩子	function(file)
2.on-remove	文件列表移除文件时的钩子	function(file, fileList)
3.on-success	文件上传成功时的钩子	function(response, file, fileList)
4.on-error	文件上传失败时的钩子	function(err, file, fileList)
6.on-progress	文件上传时的钩子
7.on-change	文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
8.on-exceed	文件超出个数限制时的钩子
9.trigger	触发文件选择框的内容

<el-upload
  class="avatar-uploader"
  action="https://jsonplaceholder.typicode.com/posts/"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

<script>
  export default {
    data() {
      return {
        imageUrl: ''
      };
    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    }
  }
</script>

Cascader 级联选择器

1.获取数据时获取的值放在options，
2.用props吧对应的值放进去

获取后台的数据渲染列表

     <el-cascader
          v-model="formData.value"
          ref="unitAreacode"
          :options="options"
          :props="defaultParams"
          @change="handleChange"
        >el-cascader>

data() {
    return {
      defaultParams:{
        value:"id",
        label:"name",
        children:"children"
      },
       options:[],
      },
       mounted() {
    this.selectList()
  },
  methods: {
    //下拉菜单数据
    selectList(){
      Apis.selectList().then(res=>{
        console.log(res)
        this.options=res.data
      })
    },

获取选择后所有的子节点

1.ref的方式调用
this.$refs.unitAreacode.getCheckedNodes()[0]

 handleChange(value){
     let result = this.$refs.unitAreacode.getCheckedNodes()[0];
   }

Table 表格

次序请求数据

<template>
  <layout-form>
    <!-- header slot -->
    <template slot="header"></template>
    <!-- default slot -->
    <el-form
      ref="formList"
      :rules="rules"
      :model="formList"
      :disabled="isDisabled"
      label-width="120px"
    >
      <el-form-item label="联系人姓名" prop="name">
        <el-input
          v-model="formList.name"
          show-word-limit
          maxlength="50"
          placeholder="请输入联系人姓名"
        ></el-input>
      </el-form-item>
      <el-form-item label="联系人电话" prop="phone_number">
        <el-input v-model="formList.phone_number"></el-input>
      </el-form-item>
      <el-form-item label="退货地址" prop="province">
        <div class="address">
          <el-select
            v-model="formList.province"
            @change="handleProvince()"
            placeholder="省"
            class="select_style"
          >
            <el-option
              v-for="item in province"
              :key="item.id"
              :label="item.full_name"
              :value="item.full_name"
            >
            </el-option>
          </el-select>
          <el-select
            @change="handleCity()"
            v-model="formList.city"
            placeholder="市"
            class="select_style"
          >
            <el-option
              v-for="item in city"
              :key="item.id"
              :label="item.full_name"
              :value="item.full_name"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="formList.area"
            placeholder="区"
            class="select_style"
          >
            <el-option
              v-for="item in area"
              :key="item.id"
              :label="item.full_name"
              :value="item.full_name"
            >
            </el-option>
          </el-select>
        </div>
        <div class="textarea_text">
          <el-input
            type="textarea"
            placeholder="请输入详细地址"
            v-model="formList.address"
            maxlength="200"
            show-word-limit
          >
          </el-input>
        </div>
      </el-form-item>
    </el-form>
    <!-- footer slot -->
    <template slot="footer" class="template">
      <div v-if="isDisabled" class="template">
        <el-button type="primary" @click="isDisabled = false">编辑</el-button>
      </div>
      <div v-else class="template">
        <el-button type="primary" @click="handlePreservation()">保存</el-button>
        <el-button @click="handleCancel()">取消</el-button>
      </div>
    </template>
  </layout-form>
</template>

<script>
import Apis from "@/apis/order/ayorder/ayorder";
export default {
  name: "Ayaddress",
  props: {},
  data() {
    let phone = (rule, value, callback) => {
      let phoneNum = /^1[34578]\d{9}$/;
      if (phoneNum.test(value) == false) {
        callback(new Error("请输入11位的手机号"));
      } else {
        callback();
      }
    };
    return {
      title: "爱悦售后地址设置",
      formList: {
        province: "",
        city: "",
        area: ""
      }, //表单数据
      textarea: "",
      isDisabled: true, //是否禁用
      province: [], //省
      city: [], //市
      area: [], //区
      rules: {
        name: [
          {
            required: true,
            message: "联系人姓名不能为空",
            trigger: "blur"
          }
        ],
        phone_number: [
          {
            required: true,
            message: "联系人电话不能为空",
            trigger: "change"
          },
          {
            validator: phone,
            trigger: "change"
          }
        ],
        province: [
          {
            required: true,
            message: "地址不能为空",
            trigger: "blur"
          }
        ]
      }
    };
  },
  mounted() {
    this.getOrderAddress();
  },
  methods: {
    //请求省市区
    async getProvince(data) {
      return await Apis.getAddressList(data);
    },
    // 获取默认地址
    async getOrderAddress() {
      let res = await Apis.getOrderAddress();
      this.formList = res.data;
      console.log(this.formList, 999999999);
      let provinceRes = await this.getProvince();
      this.province = provinceRes.data;
      let provinceID = this.province.find(item => {
        return item.full_name == this.formList.province;
      });
      let cityRes = await this.getProvince({ pid: provinceID.id });
      this.city = cityRes.data;
      let cityID = this.city.find(item => {
        return item.full_name == this.formList.city;
      });
      let areaRes = await this.getProvince({ pid: cityID.id });
      this.area = areaRes.data;
    },
    //添加地址
    async getAddTo() {
      console.log(this.formList, "+++++++++++++");
      const data = {
        name: this.formList.name,
        phone_number: this.formList.phone_number,
        province: this.formList.province,
        city: this.formList.city,
        area: this.formList.area,
        address: this.formList.address
      };
      console.log(data);
      await Apis.getAddTo(data);
    },
    //表单验证
    async formValidate() {
      let validate = await this.$refs.formList.validate();
      if (validate) {
        return true;
      } else {
        return false;
      }
    },
    //选择市
    handleProvince() {
      let provinceID = this.province.find(item => {
        return item.full_name == this.formList.province;
      });
      console.log(provinceID);
      this.getProvince({ pid: provinceID.id }).then(res => {
        this.city = res.data;
        this.formList.city = "";
        this.formList.area = "";
      });
    },
    //选择区
    handleCity() {
      let cityID = this.city.find(item => {
        return item.full_name == this.formList.city;
      });
      this.getProvince({ pid: cityID.id }).then(res => {
        this.area = res.data;
        this.formList.area = "";
      });
    },

    //取消
    handleCancel() {
      this.getOrderAddress();
      this.$refs.formList.resetFields();
      this.isDisabled = true;
    },

    //点击保存
    handlePreservation() {
      this.formValidate().then(res => {
        if (res) {
          this.$confirm("此操作将修改售后订单地址, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              this.getAddTo();
              this.isDisabled = true;
              this.$message({
                type: "success",
                message: "修改成功!"
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消"
              });
            });
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.template {
  width: 100%;
  display: flex;
}

.textarea_text {
  margin: 20px 0px;
  width: 400px;
  display: flex;
}
.el-input__inner:not(:only-child) {
  padding: 0;
}
.el-input {
  width: 400px;
}
.address {
  display: flex;
  width: 400px;
  justify-content: space-between;
}
.select_style {
  width: 120px;
  display: flex;
}
</style>