wuzhi-vue-components

example

1.wz-table、wz-table-column（表格组件）

<template>
    <div id="app">
        <wz-table :data="tableData" style="width: 100%">
            <wz-table-column prop="date" label="日期" width="180"> </wz-table-column>
            <wz-table-column prop="name" label="姓名" width="180"> </wz-table-column>
            <wz-table-column prop="address" label="地址">
                <template #default="scope">
                    <div>{{ scope.$index }}-{{ scope.$row.address }}</div>
                </template>
            </wz-table-column>
        </wz-table>
    </div>
</template>
<script>
    export default {
        name: "App",
        components: {},
        data() {
            return {
                tableData: [
                    {
                        date: "2016-05-02",
                        name: "王小虎1",
                        address: "上海市普陀区金沙江路 1518 弄",
                    },
                    {
                        date: "2016-05-04",
                        name: "王小虎2",
                        address: "上海市普陀区金沙江路 1517 弄",
                    },
                    {
                        date: "2016-05-01",
                        name: "王小虎3",
                        address: "上海市普陀区金沙江路 1519 弄",
                    },
                    {
                        date: "2016-05-03",
                        name: "王小虎4",
                        address: "上海市普陀区金沙江路 1516 弄",
                    },
                ]
            };
        }
    };
</script>

2.wz-form、wz-form-item（表单验证组件）

<template>
  <div id="app">
    <wz-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <wz-form-item label="账号" prop="account">
        <input type="text" v-model="ruleForm.account" />
      </wz-form-item>
      <wz-form-item label="密码" prop="password">
        <input type="text" v-model="ruleForm.password" />
      </wz-form-item>

      <button  @click="submitForm('ruleForm')">提交</button>
      <button @click="resetForm('ruleForm')">重置</button>
    </wz-form>
  </div>
</template>
<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      formName: "ruleForm",
      ruleForm: {
        account: "",
        password: "",
      },
      rules: {
        account: [
          { required: true, message: "请输入账号", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    onBlur(){console.log('hlll')},
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>