Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
ce75ea39 1 parent a328181e

✨ feat: 单行文本，多行文本组件完善

Inline Side-by-side
Showing 4 changed files with 11 additions and 6 deletions
1 <!-- 1 <!--
2 * @Date: 2022-08-29 14:31:20 2 * @Date: 2022-08-29 14:31:20
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-08-30 10:15:20 4 + * @LastEditTime: 2022-08-30 10:40:16
5 * @FilePath: /data-table/src/components/TextField/index.vue 5 * @FilePath: /data-table/src/components/TextField/index.vue
6 * @Description: 单行文本输入框 6 * @Description: 单行文本输入框
7 --> 7 -->
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
9 <div class="text-field-page"> 9 <div class="text-field-page">
10 <div class="label">{{ item.label }}<span v-if="item.required">&nbsp;*</span></div> 10 <div class="label">{{ item.label }}<span v-if="item.required">&nbsp;*</span></div>
11 <van-field v-model="item.value" :name="item.name" :type="item.type" :placeholder="item.placeholder" 11 <van-field v-model="item.value" :name="item.name" :type="item.type" :placeholder="item.placeholder"
12 - :rules="item.rules" :required="item.required" /> 12 + :rules="item.rules" :required="item.required" clearable />
13 </div> 13 </div>
14 </template> 14 </template>
15 15
......
1 <!-- 1 <!--
2 * @Date: 2022-08-29 14:31:20 2 * @Date: 2022-08-29 14:31:20
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-08-30 10:18:18 4 + * @LastEditTime: 2022-08-30 10:40:33
5 * @FilePath: /data-table/src/components/TextareaField/index.vue 5 * @FilePath: /data-table/src/components/TextareaField/index.vue
6 * @Description: 多行文本输入框 6 * @Description: 多行文本输入框
7 --> 7 -->
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
9 <div class="textarea-field-page"> 9 <div class="textarea-field-page">
10 <div class="label">{{ item.label }}<span v-if="item.required">&nbsp;*</span></div> 10 <div class="label">{{ item.label }}<span v-if="item.required">&nbsp;*</span></div>
11 <van-field v-model="item.value" :name="item.name" :type="item.type" :placeholder="item.placeholder" 11 <van-field v-model="item.value" :name="item.name" :type="item.type" :placeholder="item.placeholder"
12 - :rules="item.rules" :required="item.required" rows="2" autosize /> 12 + :rules="item.rules" :required="item.required" :rows="item.rows" :autosize="item.autosize" />
13 </div> 13 </div>
14 </template> 14 </template>
15 15
......
...@@ -12,6 +12,10 @@ import TextareaField from '@/components/TextareaField/index.vue' ...@@ -12,6 +12,10 @@ import TextareaField from '@/components/TextareaField/index.vue'
12 export function createComponentType(data) { 12 export function createComponentType(data) {
13 // 判断类型和使用组件 13 // 判断类型和使用组件
14 _.each(data, (item, index) => { 14 _.each(data, (item, index) => {
15 + // 必填项规则添加
16 + if (item.required) {
17 + item.rules = [{ required: true, message: item.placeholder ? item.placeholder : '必填项不能为空' }]
18 + }
15 if (item.component_type === 'text') { 19 if (item.component_type === 'text') {
16 item.type = 'text'; 20 item.type = 'text';
17 item.name = item.key; 21 item.name = item.key;
...@@ -20,6 +24,8 @@ export function createComponentType(data) { ...@@ -20,6 +24,8 @@ export function createComponentType(data) {
20 if (item.component_type === 'textarea') { 24 if (item.component_type === 'textarea') {
21 item.type = 'textarea'; 25 item.type = 'textarea';
22 item.name = item.key; 26 item.name = item.key;
27 + item.rows = 2;
28 + item.autosize = true;
23 item.component = TextareaField; 29 item.component = TextareaField;
24 } 30 }
25 // // 单选框 31 // // 单选框
......
1 <!-- 1 <!--
2 * @Date: 2022-07-18 10:22:22 2 * @Date: 2022-07-18 10:22:22
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-08-30 10:18:56 4 + * @LastEditTime: 2022-08-30 10:35:45
5 * @FilePath: /data-table/src/views/index.vue 5 * @FilePath: /data-table/src/views/index.vue
6 * @Description: 首页 6 * @Description: 首页
7 --> 7 -->
...@@ -33,7 +33,6 @@ onMounted(() => { ...@@ -33,7 +33,6 @@ onMounted(() => {
33 value: 'Hooke', 33 value: 'Hooke',
34 label: '用户名', 34 label: '用户名',
35 placeholder: '请输入用户名', 35 placeholder: '请输入用户名',
36 - rules: [{ required: true, message: '请填写用户名' }],
37 component: '', 36 component: '',
38 component_type: 'text', 37 component_type: 'text',
39 required: true, 38 required: true,
......