devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：繁依Fanyi0 | 2024-02-16 05:30:53

赞

踩

dialog title

 修改style样式

 

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

  1. <style>
  2. .el-dialog__header {
  3.   background: #002a52;
  4.   text-align: center;
  5. }
  6. .el-dialog__title {
  7.   color: aliceblue;
  8. }
  9. </style>

我们可以F12 

点击你想修改的地方

查看dialog的class

然后进行修改

全部测试代码

  1. <template>
  2.   <div>
  3.     <!-- Form -->
  4.     <el-button type="text" @click="dialogVisible  = true">打开嵌套表单的 Dialog</el-button>
  5.     <el-dialog
  6.       :visible.sync="dialogVisible"
  7.       title=" 指図種別情報参照画面"
  8.       >
  9.       <el-table
  10.         stripe = true
  11.         :data="dataList"
  12.         border
  13.         v-loading="dataListLoading"
  14.         @selection-change="handleSelectionChange"
  15.         style="100%"
  16.         height="445px"
  17.       >
  18.         <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
  19.         <el-table-column prop="ordertype" header-align="center"  label="指図種別" ></el-table-column>
  20.         <el-table-column prop="explanation" header-align="center" label="説明" ></el-table-column>
  21.       </el-table>
  22.  
  23.       <span slot="footer" class="dialog-footer">
  24.       <el-button @click="dialogVisible = false" style="width:120px">キャンセル</el-button>
  25.       <el-button type="primary" @click="dataFormSubmit()" style="width:120px">確定</el-button>
  26.     </span>
  27.     </el-dialog>
  28.   </div>
  29. </template>
  30.  
  31. <script>
  32. //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  33. //例如：import 《组件名称》 from '《组件路径》';
  34.  
  35. export default {
  36.   //import引入的组件需要注入到对象中才能使用
  37.   components: {},
  38.   data() {
  39.     //这里存放数据
  40.     return {
  41.         multipleSelection: [],
  42.       dataList: [
  43.           {
  44.             ordertype: 'AA0',
  45.             explanation: 'パターン１：売上計上（完了ベース）',
  46.           }, {
  47.             ordertype: 'AA2',
  48.             explanation: 'パターン１：売上計上（完了ベース）',
  49.           }, {
  50.             ordertype: 'AB0',
  51.             explanation: 'パターン１：売上計上（完了ベース）',
  52.           }, {
  53.             ordertype: 'BE0',
  54.             explanation: 'パターン１：売上計上（完了ベース）',
  55.           }, {
  56.             ordertype: 'AA2',
  57.             explanation: 'パターン１：売上計上（完了ベース）',
  58.           }, {
  59.             ordertype: 'AB0',
  60.             explanation: 'パターン１：売上計上（完了ベース）',
  61.           }, {
  62.             ordertype: 'BE0',
  63.             explanation: 'パターン１：売上計上（完了ベース）',
  64.           }, {
  65.             ordertype: 'AA2',
  66.             explanation: 'パターン１：売上計上（完了ベース）',
  67.           }, {
  68.             ordertype: 'AB0',
  69.             explanation: 'パターン１：売上計上（完了ベース）',
  70.           }, {
  71.             ordertype: 'BE0',
  72.             explanation: 'パターン１：売上計上（完了ベース）',
  73.           }, {
  74.             ordertype: 'AB0',
  75.             explanation: 'パターン１：売上計上（完了ベース）',
  76.           }, {
  77.             ordertype: 'BE0',
  78.             explanation: 'パターン１：売上計上（完了ベース）',
  79.           }, {
  80.             ordertype: 'AA2',
  81.             explanation: 'パターン１：売上計上（完了ベース）',
  82.           }, {
  83.             ordertype: 'AB0',
  84.             explanation: 'パターン１：売上計上（完了ベース）',
  85.           }
  86.       ],
  87.       dialogVisible : true
  88.     };
  89.   },
  90.   //监听属性 类似于data概念
  91.   computed: {},
  92.   //监控data中的数据变化
  93.   watch: {},
  94.   //方法集合
  95.   methods: {
  96.       //过度画面 数据提交
  97.       dataFormSubmit(){
  98.  
  99.       },
  100.       //选中数据
  101.      handleSelectionChange(val) {
  102.         this.multipleSelection = val;
  103.       }
  104.  
  105.  
  106.   },
  107.   //生命周期 - 创建完成（可以访问当前this实例）
  108.   created() {},
  109.   //生命周期 - 挂载完成（可以访问DOM元素）
  110.   mounted() {}
  111. };
  112. </script>
  113. // 全局修改dilog样式
  114. <style>
  115. .el-dialog__header {
  116.   background: #002a52;
  117.   text-align: center;
  118. }
  119. .el-dialog__title {
  120.   color: aliceblue;
  121. }
  122. </style>

后续修改：

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

引入这个文件组件

  1. import AddOrUpdate from "./attrgroup-add-or-update";
  2.  
  3. components: { AddOrUpdate },

引用子组件，画面显示

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

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

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

  1.     addOrUpdateHandle(id) {
  2.       this.addOrUpdateVisible = true;
  3.       this.$nextTick(() => {
  4.         this.$refs.addOrUpdate.init(id);
  5.       });
  6.     },

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

  1.     init(id) {
  2.       this.dataForm.attrGroupId = id || 0;
  3.       this.visible = true;
  4.       this.$nextTick(() => {
  5.         this.$refs["dataForm"].resetFields();
  6.         if (this.dataForm.attrGroupId) {
  7.           this.$http({
  8.             url: this.$http.adornUrl(
  9.               `/product/attrgroup/info/${this.dataForm.attrGroupId}`
  10.             ),
  11.             method: "get",
  12.             params: this.$http.adornParams()
  13.           }).then(({ data }) => {
  14.             if (data && data.code === 0) {
  15.               this.dataForm.attrGroupName = data.attrGroup.attrGroupName;
  16.               this.dataForm.sort = data.attrGroup.sort;
  17.               this.dataForm.descript = data.attrGroup.descript;
  18.               this.dataForm.icon = data.attrGroup.icon;
  19.               this.dataForm.catelogId = data.attrGroup.catelogId;
  20.               //查出catelogId的完整路径
  21.               this.catelogPath =  data.attrGroup.catelogPath;
  22.             }
  23.           });
  24.         }
  25.       });
  26.     },

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

可以向父组件传递数

画面测试

  1. <template>
  2.   <div class="scr_distribution_ref">
  3.     <div class="header">配賦先入力画面</div>
  4.     <el-container class="_container">
  5.       <el-main>
  6.         <el-form
  7.           :inline="true"
  8.           :model="dataForm"
  9.           @keyup.enter.native="searchList()"
  10.         >
  11.           <el-form-item label="キーワード">
  12.             <span class="search-input"
  13.               ><el-input
  14.                 v-model="dataForm.serarchText"
  15.                 placeholder="検索条件を入力してください"
  16.                 clearable
  17.               ></el-input
  18.             ></span>
  19.           </el-form-item>
  20.           <el-form-item>
  21.             <el-button @click="searchList()" type="primary" style="width: 120px"
  22.               >検索</el-button
  23.             >
  24.           </el-form-item>
  25.         </el-form>
  26.         <el-table
  27.           stripe
  28.           :data="dataList"
  29.           ref="multipleTable"
  30.           border
  31.           v-loading="dataListLoading"
  32.           highlight-current-row
  33.           @selection-change="handleSelectionChange"
  34.           style="width: 100%"
  35.           height="450px"
  36.           empty-text="データなし"
  37.         >
  38.           <el-table-column
  39.             type="selection"
  40.             header-align="center"
  41.             align="center"
  42.             width="50"
  43.           ></el-table-column>
  44.           <el-table-column
  45.             prop="col_category"
  46.             header-align="center"
  47.             label="カテゴリ"
  48.             width="200px"
  49.           ></el-table-column>
  50.           <el-table-column
  51.             prop="col_category_name"
  52.             header-align="center"
  53.             label="カテゴリ名称"
  54.           ></el-table-column>
  55.           <el-table-column
  56.             prop="col_remark "
  57.             header-align="center"
  58.             label="備考"
  59.             width="300px"
  60.           ></el-table-column>
  61.         </el-table>
  62.  
  63.         <p class="choiceLable">選択された配賦先</p>
  64.  
  65.         <el-table
  66.           :data="multipleSelection"
  67.           border
  68.           v-loading="dataListLoading"
  69.           highlight-current-row
  70.           style="width: 100%"
  71.           ref="TwoTable"
  72.           empty-text="データなし"
  73.         >
  74.           <el-table-column align="center" width="50"></el-table-column>
  75.           <el-table-column
  76.             prop="col_category"
  77.             header-align="center"
  78.             label="カテゴリ"
  79.             width="200px"
  80.           ></el-table-column>
  81.           <el-table-column
  82.             prop="col_category_name"
  83.             header-align="center"
  84.             label="カテゴリ名称"
  85.           ></el-table-column>
  86.           <el-table-column
  87.             header-align="center"
  88.             align="center"
  89.             label="負担率"
  90.             width="300px"
  91.           >
  92.             <template slot-scope="scope">
  93.               <el-input
  94.                 size="mini"
  95.                 placeholder="負担率を入力してください"
  96.                 v-model="scope.row.col_burden_rate"
  97.                 oninput="value=value.replace(/[^\d]/g,'')"
  98.                 maxlength="3"
  99.               >
  100.                 <i
  101.                   slot="suffix"
  102.                   style="
  103.                     font-style: normal;
  104.                     margin-right: 120px;
  105.                     float: left;
  106.                     margin-top: 3.5px;
  107.                   "
  108.                   v-show="scope.row.col_burden_rate != null"
  109.                   >%</i
  110.                 >
  111.               </el-input>
  112.             </template>
  113.           </el-table-column>
  114.         </el-table>
  115.  
  116.         <div class="footer-div">
  117.           <p class="_totalMarks">{{ totalMarks }}</p>
  118.           <p class="_total">選択された配賦先</p>
  119.           <p class="_totalRight">※トータル負担率が100%にらないけません</p>
  120.         </div>
  121.         <span class="bottom_button">
  122.           <el-button @click="cancelNavigat()" style="width: 120px"
  123.             >キャンセル</el-button
  124.           >
  125.           <el-button
  126.             type="primary"
  127.             @click="dataFormSubmit()"
  128.             style="width: 120px"
  129.             >確定</el-button
  130.           >
  131.         </span>
  132.       </el-main>
  133.     </el-container>
  134.   </div>
  135. </template>
  136.  
  137. <script>
  138. //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  139. //例如：import 《组件名称》 from '《组件路径》';
  140.  
  141. export default {
  142.   //import引入的组件需要注入到对象中才能使用
  143.   components: {},
  144.   data() {
  145.     //这里存放数据
  146.     return {
  147.       dataListLoading: false,
  148.       dataForm: {
  149.         serarchText: "",
  150.       },
  151.       multipleSelection: [],
  152.       dataList: [
  153.         {
  154.           col_category: "AA0",
  155.           col_category_name: "パターン１：売上計上（完了ベース）",
  156.           col_remark: "",
  157.         },
  158.         {
  159.           col_category: "AA2",
  160.           col_category_name: "パターン１：売上計上（完了ベース）",
  161.           col_remark: "",
  162.         },
  163.         {
  164.           col_category: "AB0",
  165.           col_category_name: "パターン１：売上計上（完了ベース）",
  166.           col_remark: "",
  167.         },
  168.         {
  169.           col_category: "BE0",
  170.           col_category_name: "パターン１：売上計上（完了ベース）",
  171.           remarks: "",
  172.         },
  173.         {
  174.           col_category: "AA2",
  175.           col_category_name: "パターン１：売上計上（完了ベース）",
  176.           col_remark: "",
  177.         },
  178.       ],
  179.       dialogVisible: true,
  180.     };
  181.   },
  182.   //监听属性 类似于data概念
  183.   computed: {
  184.     totalMarks: {
  185.       cache: false,
  186.       get: function () {
  187.         let total = 0;
  188.         let _this = this;
  189.         console.log("this.multipleSelection11" + this.multipleSelection);
  190.         _this.multipleSelection.forEach((item) => {
  191.           if (item.col_burden_rate != null) {
  192.             console.log(Number(item.col_burden_rate));
  193.             total = total + Number(item.col_burden_rate);
  194.           }
  195.         });
  196.  
  197.         return total;
  198.       },
  199.     },
  200.   },
  201.   //监控data中的数据变化
  202.   watch: {},
  203.   //方法集合
  204.   methods: {
  205.     dataFormSubmit() {
  206.       console.log("---------" + this.totalMarks);
  207.  
  208.       if (this.totalMarks == 0) {
  209.         this.$message({
  210.           message:
  211.             "負担率は0%にすることはいけません ---msg_common.msg_search_condition_null",
  212.           type: "success",
  213.           // duration: 1500,
  214.           // onClose: () => {
  215.           //   this.getDataList();
  216.           // }
  217.         });
  218.       } else if (this.totalMarks != 100) {
  219.         this.$message({
  220.           message:
  221.             "配賦先の合計負担率が100%でないことはいけません  ---msg_common.msg_search_condition_null",
  222.           type: "success",
  223.         });
  224.       } else {
  225.         //若各负荷率不为0%且合计文本为100%，则将列表中选定的分配目的地数据传递至主画面，关闭画面，返回主画面。
  226.       }
  227.     },
  228.     cancelNavigat(){
  229.        this.$router.push("/NavigationBar");
  230.     },
  231.  
  232.     init() {
  233.       this.getDataList();
  234.     },
  235.     searchList() {
  236.       console.log("this.dataForm.serarchText" + this.dataForm.serarchText);
  237.       /// キーワードを指定しない場合、「検索条件を入力してください」（msg_common.msg_search_condition_null）とのメッセージを表示して、処理を中止する
  238.       if (this.dataForm.serarchText == "") {
  239.         this.$message({
  240.           message: "検索条件を入力してください",
  241.           type: "success",
  242.         });
  243.       } else {
  244.         this.getDataList();
  245.       }
  246.     },
  247.     //检索数据  页面初始化
  248.     getDataList() {
  249.       //检索数据
  250.  
  251.       // 2.1　結果がない場合
  252.       // 	「配賦先データは存在していません」（msg_common.msg_result_null_jp）を表示する
  253.       // 	リスト配賦先カテゴリをBLANK画面で表示する
  254.       if (this.dataList == null) {
  255.         this.$message({
  256.           message: "配賦先データは存在していません",
  257.           type: "success",
  258.         });
  259.       }
  260.     },
  261.     //获取选择数据
  262.     handleSelectionChange(val) {
  263.       this.multipleSelection = [];
  264.       this.multipleSelection = val;
  265.     },
  266.   },
  267.   //生命周期 - 创建完成（可以访问当前this实例）
  268.   created() {
  269.     this.init();
  270.   },
  271.   //生命周期 - 挂载完成（可以访问DOM元素）
  272.   mounted() {},
  273. };
  274. </script>
  275. <style>
  276. .scr_distribution_ref .el-form-item__label {
  277.   background: rgb(37, 71, 134);
  278.   color: aliceblue;
  279.   width: 250px;
  280. }
  281.  
  282. .scr_distribution_ref .el-input__inner {
  283.   border-radius: 0px;
  284.   width: 400px;
  285. }
  286. .scr_distribution_ref ._container {
  287.   border: 1px solid #000;
  288. }
  289.  
  290. .scr_distribution_ref .header {
  291.   background-color: #053868;
  292.   color: rgb(255, 255, 255);
  293.   text-align: center;
  294.   line-height: 40px;
  295.   height: 100%;
  296.   width: 100%;
  297. }
  298.  
  299. .scr_distribution_ref .choiceLable {
  300.   background: rgb(37, 71, 134);
  301.   color: aliceblue;
  302.   width: 250px;
  303.   height: 40px;
  304.   font-size: 14px;
  305.   line-height: 40px;
  306.   text-align: right;
  307.   padding: 0 12px 0 0;
  308.   margin: 0;
  309.   margin-top: 20px;
  310.  
  311. }
  312. .scr_distribution_ref .bottom_button {
  313.   float: right;
  314.  
  315.   margin-top: 5px;
  316. }
  317. .scr_distribution_ref .footer-div ._total {
  318.   border: 1px solid rgb(8, 8, 8);
  319.   width: 150px;
  320.   height: 36px;
  321.   /* display:inline-block; */
  322.   background: rgb(37, 71, 134);
  323.   color: rgb(255, 255, 255);
  324.   line-height: 36px;
  325.   font-size: 14px;
  326.   text-align: right;
  327.   padding: 0 12px 0 0;
  328.   margin: 0;
  329.   float: right;
  330. }
  331. .scr_distribution_ref .footer-div ._totalMarks {
  332.   border: 1px solid rgb(226, 215, 215);
  333.   width: 300px;
  334.   height: 36px;
  335.   /* display:inline-block; */
  336.   background: rgb(255, 255, 255);
  337.   color: rgb(0, 0, 0);
  338.   line-height: 36px;
  339.   font-size: 14px;
  340.   text-align: right;
  341.   padding: 0 12px 0 0;
  342.   margin: 0;
  343.  
  344.   float: right;
  345. }
  346. .scr_distribution_ref .footer-div {
  347.   height: 44px;
  348.   overflow: hidden;
  349. }
  350. .scr_distribution_ref .footer-div ._totalRight {
  351.   color: rgb(255, 8, 8);
  352.   float: right;
  353.   margin-right: 8px;
  354.   line-height: 44px;
  355. }
  356. </style>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/91087
推荐阅读