{"id":957,"date":"2024-01-15T18:01:02","date_gmt":"2024-01-15T10:01:02","guid":{"rendered":""},"modified":"2024-01-15T18:01:02","modified_gmt":"2024-01-15T10:01:02","slug":"Element-ui\u53ef\u80fd\u9047\u5230\u7684\u95ee\u9898\uff08\u6301\u7eed\u66f4\u65b0\uff09","status":"publish","type":"post","link":"https:\/\/mushiming.com\/957.html","title":{"rendered":"Element-ui\u53ef\u80fd\u9047\u5230\u7684\u95ee\u9898\uff08\u6301\u7eed\u66f4\u65b0\uff09"},"content":{"rendered":"

\n <\/path> \n<\/svg> <\/p>\n

\u5f15\u5165\u65e5\u671f\u65f6\u95f4\u7684\u65f6\u5019\u9047\u5230\u82f1\u6587\u95ee\u9898\uff1f<\/h3>\n

\u9700\u8981\u5728main.js\u914d\u7f6e\u8fd9\u53e5\u8bdd\uff1a
import locale from \u201celement-ui\/lib\/locale\/lang\/zh-CN\u201d;
Vue.use(ElementUI, {locale})
\u8868\u793a\u5168\u5c40\u914d\u7f6eelement \u591a\u8bed\u8a00 \u7ec4\u4ef6\u3002<\/p>\n

\n

\u9009\u62e9\u5b8c\u6210\u7684\u65e5\u671f\u65f6\u95f4\u7ed3\u679c\u6253\u5370\u3002<\/h3>\n

\u6846\u67b6\u8fd4\u56de\u7684\u65f6\u95f4\u662f\u8fd9\u6837\u7684\uff1aFri Nov 10 2000 04:01:01 GMT+0800 (\u4e2d\u56fd\u6807\u51c6\u65f6\u95f4)\uff0c\u53ef\u4ee5\u901a\u8fc7\u4ee5\u4e0b\u65b9\u5f0f\u8f6c\u6362\u6210\uff1a2000-11-10 4:1:1
let Day = new Date(e[0]);
let Time=Day.getFullYear() +\u201c-\u201d +this.double(d.getMonth() + 1) + \u201c-\u201d +this.double(d.getDate()) + \" \" +this.double(d.getHours())+\u201c:\u201d +this.double(d.getMinutes()) +\u201c:\u201d +this.double(d.getSeconds());<\/p>\n

double(num) {
\n
if (num < 10) {
\n
return \u201c0\u201d + num; \/\/\u5982\u679c\u65f6\u5206\u79d2\u5c11\u4e8e10\uff0c\u5219\u5728\u524d\u9762\u52a0\u5b57\u7b26\u4e320
} else {
\n
return \u201c\u201d + num; \/\/\u5426\u5219\uff0c\u76f4\u63a5\u8fd4\u56de\u539f\u6709\u6570\u5b57
}
}<\/p>\n

\n

\u6839\u636e\u6761\u4ef6\u9ad8\u4eae\u6570\u636e<\/h3>\n

\u5728table\u6807\u7b7e\u4e0a\u6dfb\u52a0\u6b21\u51fd\u6570 :row-class-name=\u201ctableRowClassName\u201d\u3002
tableRowClassName({row, rowIndex}) {
\n
if (row.money > 5000) {
\n
return \u2018money-row\u2019
}
}
\u7136\u540e\u7b5b\u9009\u6761\u4ef6\u8fd4\u56de\u4e00\u4e2a\u7c7b\u540d\u3002
:row-class-name \u662f\u5728 td \u4e0a\u6dfb\u52a0\u7c7b\u540d\uff0c\u8fd8\u6709 :cell-class-name \u5f80 tr \u4e0a\u9762\u52a0\u3002<\/p>\n

\n

\u5faa\u73af\u8868\u5934<\/h3>\n

\u5728table\u8868\u683c\u4e2d\u5982\u679c\u5934\u90e8\u4e0d\u56fa\u5b9a\u53ef\u4ee5\u8fd9\u6837\u5199~<\/p>\n

<el-table-column\n  \t v-for=\"(item, i) in ClothesSize\"\n     :prop=\"item.prop\"\n     :key=\"i\"\n     :label=\"item.size\"\n     width=\"180\">\n<\/el-table-column>\n<\/code><\/pre>\n
\u5728 ClothesSize \u91cc\u9762 size\u5c31\u662f\u6807\u9898\uff0cprop \u8fd9\u4e2a\u5c5e\u6027\u540d\u662f\u8868\u793a\u4f7f\u7528 table \u91cc\u9762\u7684 :data=\u201ctableDataClothes\u201d \u7684\u6570\u636e\u3002<\/p>\n
\n
\u9690\u85cf\u7684 el-scrollbar \u7ec4\u4ef6<\/h3>\n
element\u4e2d\u6709\u4e2a\u9690\u85cf\u7684\u7ec4\u4ef6\u5b98\u65b9\u5e76\u672a\u7ed9\u51fa\u6587\u6863\uff0c\u4ed6\u662f\u81ea\u5e26\u7684\u4e00\u4e2a\u81ea\u5b9a\u4e49\u6eda\u52a8\u7ec4\u4ef6\uff0c\u4e5f\u662f\u975e\u5e38\u597d\u7528\u7684~<\/p>\n
<el-scrollbar wrap-class=\"\"  view-class=\"\" :native=\"false\" >\n\t......\n<\/el-scrollbar>\n<\/code><\/pre>\n
\u53ea\u8981\u7528\u8fd9\u4e2a\u6807\u7b7e\u5305\u4f4f\u5de6\u4fa7\u5bfc\u822a\u680f\u5c31\u53ef\u4ee5\u4e86\uff0cwrap-class\u662f\u8bbe\u7f6e\u4ed6\u5b50\u6807\u7b7e\u7684class\u7c7b\u540d\uff0cview-class\u662f\u8bbe\u7f6e\u5b50\u6807\u7b7e\u7684\u5b50\u6807\u7b7e\u7c7b\u540d\uff0cnative\u662f\u9009\u62e9\u662f\u5426\u663e\u793a\u7ec4\u4ef6\u7684\u6eda\u52a8\u6761\u3002<\/p>\n
\n
\u6811\u5f62\u63a7\u4ef6\u65e0\u6cd5\u9ed8\u8ba4\u9009\u4e2d<\/h3>\n
  this.$nextTick(() => {\n      this.$refs.tree.setCheckedKeys(arr);\n  });\n<\/code><\/pre>\n
\n
\u56fa\u5b9a\u8868\u5934\u7684\u8868\u683c\u5207\u6362tab\u6837\u5f0f\u9519\u4e71<\/h3>\n
\u5982\u56fe\uff1a
 \"Element-ui\u53ef\u80fd\u9047\u5230\u7684\u95ee\u9898\uff08\u6301\u7eed\u66f4\u65b0\uff09
 \u8fd9\u4e2a\u662f\u56e0\u4e3a\u56fa\u5b9a\u8868\u5934\u7684\u662f\u4e24\u4e2atable \u5b9a\u4f4d\u4e0a\u53bb\u7684\u6240\u4ee5\u4f1a\u9519\u4e71\uff0c\u8fd9\u65f6\u5019\u53ea\u9700\u8981v-if \u91cd\u65b0\u6e32\u67d3\u5373\u53ef\uff01<\/p>\n
 v-<\/span>if<\/span>=<\/span>\"activeName === 'first'\"<\/span>\n<\/code><\/pre>\n
\n
Tooltip\u6587\u5b57\u63d0\u793a\u914d\u5408Tabs \u6807\u7b7e<\/h3>\n
  <<\/span>el-<\/span>tab-<\/span>pane\n                  v-<\/span>for<\/span>=<\/span>\"(item, index) in editableTabs\"<\/span>\n                  :<\/span>key=<\/span>\"index\"<\/span>\n                  :<\/span>label=<\/span>\"item.custName\"<\/span>\n                  :<\/span>name=<\/span>\"index.toString()\"<\/span>\n                ><\/span>\n                  <<\/span>span slot=<\/span>\"label\"<\/span>><\/span>\n                    <<\/span>el-<\/span>tooltip  class=<\/span>\"item\"<\/span> effect=<\/span>\"light\"<\/span> :<\/span>content=<\/span>\"item.custName\"<\/span> placement=<\/span>\"bottom\"<\/span>><\/span>\n                      <<\/span>span ><\/span>{ \n   <\/span>{ \n   <\/span>item.<\/span>custName}<\/span>}<\/span><<\/span>\/<\/span>span><\/span>\n                   <<\/span>\/<\/span>el-<\/span>tooltip><\/span>\n                  <<\/span>\/<\/span>span><\/span>\n<<\/span>\/<\/span>el-<\/span>tab-<\/span>pane><\/span>\n<\/code><\/pre>\n
\n
\u4fee\u6539table\u6587\u5b57<\/p>\n
 <el-table>\n\t <template slot=\"empty\" >\n\t     <span >\u8fd9\u91cc\u6682\u65e0\u6570\u636e<\/span>\n\t <\/template>\n  <\/el-table>\n<\/code><\/pre>\n
\n
tabs\u4e2d\u52a0form\u8868\u5355\u6821\u9a8c<\/h3>\n
 <el-form ref=\"formRef\" :model=\"tabsObj\" :rules=\"rules\" label-position=\"right\" label-width=\"150px\" size=\"small\">\n        <el-tab-pane v-for=\"(item, i) in tabsObj.pmsCtrtDtlList\" :key=\"i\" :label=\"'(\u89c4\u683c' + (i+1) + ')' + item.mtr_mdl\" :name=\"i + ''\">\t\n\t\t   <el-row :gutter=\"24\" class=\"\">\n                <el-col :span=\"12\">\n                  <el-form-item label=\"\uff1a\" :prop=\"`pmsCtrtDtlList.${i}.dlvy_date`\" :rules=\"rules.dlvy_date\" >\n                    <el-date-picker\n                        :disabled=\"idDisabled\"\n                        size=\"small\"\n                        v-model=\"item.dlvy_date\"\n                        type=\"date\"\n                        clearable\n                        value-format=\"yyyy-MM-dd\"\n                    ><\/el-date-picker>\n                  <\/el-form-item>\n                <\/el-col>\n              <\/el-row>\n <\/el-tabs>\n   <\/el-form>\n\n rules:{\n        dlvy_date: [{ required: true, message: '\u8bf7\u8f93\u5165\u5408\u540c\u4ea4\u671f', trigger: 'blur' }],\n        project_sign: [{ required: true, message: '\u8bf7\u8f93\u5165\u9879\u76ee\u6807\u8bc6', trigger: 'blur' }],\n        ws_sign: [{ required: true, message: '\u8bf7\u9009\u62e9\u5236\u9020\u8f66\u95f4', trigger: 'blur' }],\n        motor_code: [{ required: true, message: '\u8bf7\u8f93\u5165\u7535\u673a\u4ee3\u53f7', trigger: 'blur' }],\n        base_code: [{ required: true,  message: '\u8bf7\u8f93\u5165\u673a\u5ea7', trigger: 'blur' }],\n      },\n\n   this.$refs.formRef.validate(async valid => {\n        if (valid) {\n  \t\t\t }\n      })\n\n<\/code><\/pre>\n
\n
\u8868\u683c\u5220\u9664\u9009\u4e2d\u884c<\/h3>\n
            <el-button style=\"margin-left: 30px\" size=\"mini\" type=\"danger\" @click=\"deleteFn(selectedRowKeys)\">\u5220\u9664<\/el-button>\n\n\n deleteFn(selections){\n      if (selections.length > 0) {\n        this.$confirm(`\u786e\u5b9a\u5220\u9664\u9009\u4e2d\u6570\u636e?`, \"\u63d0\u793a\", {\n          confirmButtonText: \"\u786e\u5b9a\",\n          cancelButtonText: \"\u53d6\u6d88\",\n          type: \"warning\",\n        })\n        .then(() => {\n          for (let i = 0; i < selections.length; i++) {\n            for (let y = 0; y < this.datas.length; y++) {\n              if (this.datas[y].index == selections[i].index) {\n                console.log(this.datas[y].index, selections[i].index);\n                this.datas.splice(y, 1);\n                break;\n              }\n            }\n          }\n          console.log(this.datas, '=this.datas');\n        })\n        .catch(() => {});\n      } else {\n        this.$message({ message: \"\u8bf7\u9009\u62e9\u8981\u5220\u9664\u7684\u6570\u636e\", type: \"warning\" });\n        return false;\n      }\n    },\n\n\n\n<\/code><\/pre>\n
\n
\u4f7f\u7528\u8fdc\u7a0b\u641c\u7d22\u4e0b\u62c9\u6846\uff0c\u53f3\u4fa7icon\u6d88\u5931<\/h3>\n
\/deep\/ .el-select {\n  .el-select__caret:first-child::before {content: \"\\e6e1\";}\n  .is-focus {.el-select__caret:first-child {transform: rotateZ(0deg);}}\n}\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"Element-ui\u53ef\u80fd\u9047\u5230\u7684\u95ee\u9898\uff08\u6301\u7eed\u66f4\u65b0\uff09\u5f15\u5165\u65e5\u671f\u65f6\u95f4\u7684\u65f6\u5019\u9047\u5230\u82f1\u6587\u95ee\u9898\uff1f\u9700\u8981\u5728main.js\u914d\u7f6e\u8fd9\u53e5\u8bdd\uff1aimportlocalefrom\u201celement...","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"_links":{"self":[{"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/posts\/957"}],"collection":[{"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/comments?post=957"}],"version-history":[{"count":0,"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/posts\/957\/revisions"}],"wp:attachment":[{"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/media?parent=957"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/categories?post=957"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/tags?post=957"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}