[add] 可扩展表格封装

2023-09-04 18:05:49 +08:00
parent 3ec511e114
commit 751569f25a
1 changed files with 73 additions and 0 deletions
@@ -0,0 +1,73 @@
+<template>
+  <a-table :columns="columns" :data-source="dataSource" defaultExpandAllRows>
+    <!-- 如果插槽是作用域插槽，将作用域插槽的props包装成对象传递给slot -->
+    <template v-for="(_, slotName) in $scopedSlots" :slot="slotName" slot-scope="text, record, index">
+      <slot :name="slotName" v-bind="{text, record, index}" />
+    </template>
+    <!-- 如果是普通插槽，直接使用$slots渲染 -->
+    <slot v-for="(_, slotName) in $slots" :name="slotName" :slot="slotName" />
+    <div slot="expandedRowRender" slot-scope="record, index" style="margin: 0">
+      <a-form-model :model="record" :rules="rules" :ref="`ruleForm${index}`">
+        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="依据描述" prop="desc">
+          <a-input
+            type="textarea"
+            placeholder="请输入依据描述"
+            v-model="record.desc" />
+        </a-form-model-item>
+        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="工作令编号" prop="tokenNum">
+          <a-input
+            placeholder="请输入工作令编号"
+            v-model="record.tokenNum" />
+        </a-form-model-item>
+        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="项目名称" prop="itemName">
+          <a-input
+            placeholder="请输入项目名称"
+            v-model="record.itemName" />
+        </a-form-model-item>
+      </a-form-model>
+    </div>
+  </a-table>
+</template>
+
+<script>
+export default {
+  name: 'JExpandTable',
+  props: ['columns', 'dataSource', 'modelType'],
+  data () {
+    return {
+      labelCol: {
+        sm: 4
+      },
+      wrapperCol: {
+        sm: 16
+      },
+      rules: {
+        desc: { required: true, message: '请输入依据描述', trigger: 'blur' },
+        tokenNum: { required: true, message: '请输入工作令编号', trigger: 'blur' },
+        itemName: { required: true, message: '请输入项目名称', trigger: 'blur' }
+      }
+    }
+  },
+  methods: {
+    submit () {
+      const arr = []
+      for (const i in this.dataSource) {
+        if (this.$refs[`ruleForm${i}`]) {
+          this.$refs[`ruleForm${i}`].validate(valid => {
+            arr[i] = valid
+          })
+        }
+      }
+      if (arr.includes(false)) {
+        return false
+      } else {
+        return true
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>