关于element-ui dialog title等样式修改

 修改style样式

 

但是由于scope只能修改当前组件样式，所以去掉scope

我们可以F12 

点击你想修改的地方

查看dialog的class

然后进行修改

全部测试代码

// 全局修改dilog样式

后续修改：

我们把这个画面设置成为组件

引入这个文件组件

import AddOrUpdate from "./attrgroup-add-or-update";

components: { AddOrUpdate },

引用子组件，画面显示

 设置一个按钮如果保存或者更新的时候，我们可以直接调用这个方法

this.$nextTick
这个方法作用是当数据被修改后使用这个方法会回调获取更新后的dom再渲染出来

    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
      });
    },

 父组件调用子组件的方法  请求最新的数据初始化

    init(id) {
      this.dataForm.attrGroupId = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.attrGroupId) {
          this.$http({
            url: this.$http.adornUrl(
              `/product/attrgroup/info/${this.dataForm.attrGroupId}`
            ),
            method: "get",
            params: this.$http.adornParams()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataForm.attrGroupName = data.attrGroup.attrGroupName;
              this.dataForm.sort = data.attrGroup.sort;
              this.dataForm.descript = data.attrGroup.descript;
              this.dataForm.icon = data.attrGroup.icon;
              this.dataForm.catelogId = data.attrGroup.catelogId;
              //查出catelogId的完整路径
              this.catelogPath =  data.attrGroup.catelogPath;
            }
          });
        }
      });
    },

利用  this.$emit("refreshDataList");

可以向父组件传递数

画面测试