Merge pull request #578 from DaoCloud/docs/editable-table

docs(editable-table): add docs for editable-table

examples/view/demos/editable-table/demo-1.vue

@@ -0,0 +1,129 @@
+<template>
+  <div>
+    <dao-editable-table 
+      :config="config" 
+      v-model="model" 
+      @valid="validChange">
+    </dao-editable-table>
+    <button 
+      class="dao-btn blue" 
+      @click="changeHeader">添加一列</button>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      config: {
+        header: [
+          '变量 ID',
+          '变量名',
+          '类型',
+          '变量描述',
+          '是否必填',
+          '默认值',
+        ],
+        body: [{
+          type: 'input',
+          name: 'id',
+          default: '',
+          validate(row, all) {
+            if (row.id === '') {
+              return '变量 ID 不能为空';
+            }
+            if (all.filter(r => r.id === row.id).length > 1) {
+              return '变量 ID 不能重复';
+            }
+            return true;
+          },
+        },
+        {
+          type: 'input',
+          name: 'name',
+          default: '',
+          validate(row) {
+            if (row.name === '') {
+              return '变量名不能为空';
+            }
+            return true;
+          },
+        },
+        {
+          type: 'select',
+          name: 'type',
+          options: ['字符串', '布尔值', 'url', '密码', '文本'], // 此处具体的用法还要根据 select 而定
+          default: '字符串',
+        },
+        {
+          type: 'input',
+          name: 'description',
+          default: '',
+          validate(row) {
+            if (row.description === '') {
+              return '变量描述不能为空';
+            }
+            return true;
+          },
+        },
+        {
+          type: 'checkbox',
+          name: 'required',
+          default: true,
+          label: '必填',
+        },
+        {
+          type: 'input',
+          name: 'default',
+          placeholder: 'root',
+          validate(row) {
+            if (row.type === '布尔值' && row.default !== 'true' && row.default !== 'false') {
+              console.log('currentRow1', row);
+              return '默认值与类型不符';
+            }
+            if (row.type === 'url') {
+              const urlReg = /^(https?:\/\/)?[a-z0-9-]+(\.[a-z0-9-]+)+\.?(\/.*)?$/i;
+              if (!urlReg.test(row.default)) {
+                console.log('currentRow2', row);
+                return '默认值与类型不符';
+              }
+            }
+            return true;
+          },
+        }],
+      },
+      model: [{
+        default: '',
+        description: 'The Root Password of MySQL',
+        id: 'mysql_root_password',
+        name: 'Root Password',
+        required: true,
+        type: '字符串',
+        placeholder: '此列不应显示，显示说明有 bug',
+      }],
+    };
+  },
+  methods: {
+    validChange(val) {
+      console.log('验证结果改变', val);
+    },
+    changeHeader() {
+      this.config.header.push('最大值');
+      this.config.body.push({
+        type: 'input',
+        name: 'age',
+        default: 50,
+      });
+    },
+  },
+  watch: {
+    model(newModel) {
+      console.log('model 已更新', newModel);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.dao-btn {
+  margin-top: 10px;
+}
+</style>