elementui dialog加载页面 element-ui dialog

转载

mob64ca13ffd0f1 2024-02-24 07:43:56

文章标签 css html html5 List 数据 文章分类 机器学习人工智能

修改style样式

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

<style>
.el-dialog__header {
  background: #002a52;
  text-align: center;
}
.el-dialog__title {
  color: aliceblue;
}
</style>

elementui dialog加载页面 element-ui dialog_数据

我们可以F12

点击你想修改的地方

查看dialog的class

然后进行修改

elementui dialog加载页面 element-ui dialog_css_02

全部测试代码

<template>
  <div>
    <!-- Form -->
    <el-button type="text" @click="dialogVisible  = true">打开嵌套表单的 Dialog</el-button>
    <el-dialog
      :visible.sync="dialogVisible"
      title=" 指図種別情報参照画面"
      >
      <el-table
        stripe = true
        :data="dataList"
        border
        v-loading="dataListLoading"
        @selection-change="handleSelectionChange"
        style="100%"
        height="445px"
      >
        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
        <el-table-column prop="ordertype" header-align="center"  label="指図種別" ></el-table-column>
        <el-table-column prop="explanation" header-align="center" label="説明" ></el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false" style="width:120px">キャンセル</el-button>
      <el-button type="primary" @click="dataFormSubmit()" style="width:120px">確定</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
        multipleSelection: [],
      dataList: [
          {
            ordertype: 'AA0',
            explanation: 'パターン１：売上計上（完了ベース）',
          }, {
            ordertype: 'AA2',
            explanation: 'パターン１：売上計上（完了ベース）',
          }, {
            ordertype: 'AB0',
            explanation: 'パターン１：売上計上（完了ベース）',
          }, {
            ordertype: 'BE0',
            explanation: 'パターン１：売上計上（完了ベース）',
          }, {
            ordertype: 'AA2',
            explanation: 'パターン１：売上計上（完了ベース）',
          }, {
            ordertype: 'AB0',
            explanation: 'パターン１：売上計上（完了ベース）',
          }, {
            ordertype: 'BE0',
            explanation: 'パターン１：売上計上（完了ベース）',
          }, {
            ordertype: 'AA2',
            explanation: 'パターン１：売上計上（完了ベース）',
          }, {
            ordertype: 'AB0',
            explanation: 'パターン１：売上計上（完了ベース）',
          }, {
            ordertype: 'BE0',
            explanation: 'パターン１：売上計上（完了ベース）',
          }, {
            ordertype: 'AB0',
            explanation: 'パターン１：売上計上（完了ベース）',
          }, {
            ordertype: 'BE0',
            explanation: 'パターン１：売上計上（完了ベース）',
          }, {
            ordertype: 'AA2',
            explanation: 'パターン１：売上計上（完了ベース）',
          }, {
            ordertype: 'AB0',
            explanation: 'パターン１：売上計上（完了ベース）',
          }
      ],
      dialogVisible : true
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
      //过度画面 数据提交
      dataFormSubmit(){

      },
      //选中数据
     handleSelectionChange(val) {
        this.multipleSelection = val;
      }


  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {}
};
</script>
// 全局修改dilog样式
<style>
.el-dialog__header {
  background: #002a52;
  text-align: center;
}
.el-dialog__title {
  color: aliceblue;
}
</style>

后续修改：

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

引入这个文件组件

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

components: { AddOrUpdate },

引用子组件，画面显示

<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" 
  @refreshDataList="getDataList"></add-or-update>

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

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");

可以向父组件传递数

画面测试

<template>
  <div class="scr_distribution_ref">
    <div class="header">配賦先入力画面</div>
    <el-container class="_container">
      <el-main>
        <el-form
          :inline="true"
          :model="dataForm"
          @keyup.enter.native="searchList()"
        >
          <el-form-item label="キーワード">
            <span class="search-input"
              ><el-input
                v-model="dataForm.serarchText"
                placeholder="検索条件を入力してください"
                clearable
              ></el-input
            ></span>
          </el-form-item>
          <el-form-item>
            <el-button @click="searchList()" type="primary" style="width: 120px"
              >検索</el-button
            >
          </el-form-item>
        </el-form>
        <el-table
          stripe
          :data="dataList"
          ref="multipleTable"
          border
          v-loading="dataListLoading"
          highlight-current-row
          @selection-change="handleSelectionChange"
          style="width: 100%"
          height="450px"
          empty-text="データなし"
        >
          <el-table-column
            type="selection"
            header-align="center"
            align="center"
            width="50"
          ></el-table-column>
          <el-table-column
            prop="col_category"
            header-align="center"
            label="カテゴリ"
            width="200px"
          ></el-table-column>
          <el-table-column
            prop="col_category_name"
            header-align="center"
            label="カテゴリ名称"
          ></el-table-column>
          <el-table-column
            prop="col_remark "
            header-align="center"
            label="備考"
            width="300px"
          ></el-table-column>
        </el-table>

        <p class="choiceLable">選択された配賦先</p>

        <el-table
          :data="multipleSelection"
          border
          v-loading="dataListLoading"
          highlight-current-row
          style="width: 100%"
          ref="TwoTable"
          empty-text="データなし"
        >
          <el-table-column align="center" width="50"></el-table-column>
          <el-table-column
            prop="col_category"
            header-align="center"
            label="カテゴリ"
            width="200px"
          ></el-table-column>
          <el-table-column
            prop="col_category_name"
            header-align="center"
            label="カテゴリ名称"
          ></el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            label="負担率"
            width="300px"
          >
            <template slot-scope="scope">
              <el-input
                size="mini"
                placeholder="負担率を入力してください"
                v-model="scope.row.col_burden_rate"
                oninput="value=value.replace(/[^\d]/g,'')"
                maxlength="3"
              >
                <i
                  slot="suffix"
                  style="
                    font-style: normal;
                    margin-right: 120px;
                    float: left;
                    margin-top: 3.5px;
                  "
                  v-show="scope.row.col_burden_rate != null"
                  >%</i
                >
              </el-input>
            </template>
          </el-table-column>
        </el-table>

        <div class="footer-div">
          <p class="_totalMarks">{{ totalMarks }}</p>
          <p class="_total">選択された配賦先</p>
          <p class="_totalRight">※トータル負担率が100%にらないけません</p>
        </div>
        <span class="bottom_button">
          <el-button @click="cancelNavigat()" style="width: 120px"
            >キャンセル</el-button
          >
          <el-button
            type="primary"
            @click="dataFormSubmit()"
            style="width: 120px"
            >確定</el-button
          >
        </span>
      </el-main>
    </el-container>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      dataListLoading: false,
      dataForm: {
        serarchText: "",
      },
      multipleSelection: [],
      dataList: [
        {
          col_category: "AA0",
          col_category_name: "パターン１：売上計上（完了ベース）",
          col_remark: "",
        },
        {
          col_category: "AA2",
          col_category_name: "パターン１：売上計上（完了ベース）",
          col_remark: "",
        },
        {
          col_category: "AB0",
          col_category_name: "パターン１：売上計上（完了ベース）",
          col_remark: "",
        },
        {
          col_category: "BE0",
          col_category_name: "パターン１：売上計上（完了ベース）",
          remarks: "",
        },
        {
          col_category: "AA2",
          col_category_name: "パターン１：売上計上（完了ベース）",
          col_remark: "",
        },
      ],
      dialogVisible: true,
    };
  },
  //监听属性 类似于data概念
  computed: {
    totalMarks: {
      cache: false,
      get: function () {
        let total = 0;
        let _this = this;
        console.log("this.multipleSelection11" + this.multipleSelection);
        _this.multipleSelection.forEach((item) => {
          if (item.col_burden_rate != null) {
            console.log(Number(item.col_burden_rate));
            total = total + Number(item.col_burden_rate);
          }
        });

        return total;
      },
    },
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    dataFormSubmit() {
      console.log("---------" + this.totalMarks);

      if (this.totalMarks == 0) {
        this.$message({
          message:
            "負担率は0%にすることはいけません ---msg_common.msg_search_condition_null",
          type: "success",
          // duration: 1500,
          // onClose: () => {
          //   this.getDataList();
          // }
        });
      } else if (this.totalMarks != 100) {
        this.$message({
          message:
            "配賦先の合計負担率が100%でないことはいけません  ---msg_common.msg_search_condition_null",
          type: "success",
        });
      } else {
        //若各负荷率不为0%且合计文本为100%，则将列表中选定的分配目的地数据传递至主画面，关闭画面，返回主画面。
      }
    },
    cancelNavigat(){
       this.$router.push("/NavigationBar");
    },

    init() {
      this.getDataList();
    },
    searchList() {
      console.log("this.dataForm.serarchText" + this.dataForm.serarchText);
      /// キーワードを指定しない場合、「検索条件を入力してください」（msg_common.msg_search_condition_null）とのメッセージを表示して、処理を中止する
      if (this.dataForm.serarchText == "") {
        this.$message({
          message: "検索条件を入力してください",
          type: "success",
        });
      } else {
        this.getDataList();
      }
    },
    //检索数据  页面初始化
    getDataList() {
      //检索数据

      // 2.1　結果がない場合
      // 	「配賦先データは存在していません」（msg_common.msg_result_null_jp）を表示する
      // 	リスト配賦先カテゴリをBLANK画面で表示する
      if (this.dataList == null) {
        this.$message({
          message: "配賦先データは存在していません",
          type: "success",
        });
      }
    },
    //获取选择数据
    handleSelectionChange(val) {
      this.multipleSelection = [];
      this.multipleSelection = val;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.init();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style>
.scr_distribution_ref .el-form-item__label {
  background: rgb(37, 71, 134);
  color: aliceblue;
  width: 250px;
}

.scr_distribution_ref .el-input__inner {
  border-radius: 0px;
  width: 400px;
}
.scr_distribution_ref ._container {
  border: 1px solid #000;
}

.scr_distribution_ref .header {
  background-color: #053868;
  color: rgb(255, 255, 255);
  text-align: center;
  line-height: 40px;
  height: 100%;
  width: 100%;
}

.scr_distribution_ref .choiceLable {
  background: rgb(37, 71, 134);
  color: aliceblue;
  width: 250px;
  height: 40px;
  font-size: 14px;
  line-height: 40px;
  text-align: right;
  padding: 0 12px 0 0;
  margin: 0;
  margin-top: 20px;

}
.scr_distribution_ref .bottom_button {
  float: right;

  margin-top: 5px;
}
.scr_distribution_ref .footer-div ._total {
  border: 1px solid rgb(8, 8, 8);
  width: 150px;
  height: 36px;
  /* display:inline-block; */
  background: rgb(37, 71, 134);
  color: rgb(255, 255, 255);
  line-height: 36px;
  font-size: 14px;
  text-align: right;
  padding: 0 12px 0 0;
  margin: 0;
  float: right;
}
.scr_distribution_ref .footer-div ._totalMarks {
  border: 1px solid rgb(226, 215, 215);
  width: 300px;
  height: 36px;
  /* display:inline-block; */
  background: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  line-height: 36px;
  font-size: 14px;
  text-align: right;
  padding: 0 12px 0 0;
  margin: 0;

  float: right;
}
.scr_distribution_ref .footer-div {
  height: 44px;
  overflow: hidden;
}
.scr_distribution_ref .footer-div ._totalRight {
  color: rgb(255, 8, 8);
  float: right;
  margin-right: 8px;
  line-height: 44px;
}
</style>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。