refactor:TTable组件单元格编辑使用TSelectTable组件及重置功能

docs/.vuepress/components/docsComponents/TTable/rulesSelectTable.vue

@@ -0,0 +1,275 @@
+<template>
+  <t-layout-page>
+    <t-layout-page-item>
+      <t-table
+        title="单元格编辑TSelectTable--rules"
+        :table="table"
+        :columns="table.columns"
+        :isShowPagination="false"
+        ref="singleEditTSelectTable"
+        :listTypeInfo="listTypeInfo"
+        @handleEvent="handleEvent"
+        @save="singleSave"
+        @validateError="validateError"
+        isShowFooterBtn
+      >
+        <template #toolbar>
+          <div class="add_data" style="display: flex;margin-right: 10px">
+            <el-input-number size="small" v-model="num" clearable placeholder="请输入追加条数"></el-input-number>
+            <el-button size="small" type="primary" @click="add">追加{{ num ? num : "" }}条数据</el-button>
+          </div>
+          <el-button size="small" type="primary" @click="save">另一种获取table数据</el-button>
+          <el-button size="small" @click="clearValidate">清除校验规则</el-button>
+          <el-button size="small" type="primary" @click="reset">重置表单</el-button>
+        </template>
+      </t-table>
+    </t-layout-page-item>
+  </t-layout-page>
+</template>
+
+<script>
+import tselectData from './tselecttabledata.json'
+export default {
+  name: 'TtableSingleEditRules',
+  data() {
+    return {
+      num: 2,
+      tableData: [],
+      // 编辑某个单元格
+      table: {
+        rules: {
+          hobby: [
+            { required: true, message: '请至少选择一个爱好', trigger: 'change' },
+          ],
+          deptCode: [
+            { required: true, message: '请选择用户名称', trigger: 'change' },
+          ],
+          year: [{ required: true, message: '请选择年份', trigger: 'change' }],
+          name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
+        },
+        firstColumn: { type: 'index', label: '序列' }, // 显示序列号
+        data: [],
+        columns: [
+          {
+            prop: 'name',
+            label: '姓名',
+            minWidth: '160',
+            canEdit: true,
+            headerRequired: true,
+            configEdit: {
+              label: '姓名',
+              type: 'input',
+              editComponent: 'el-input',
+            },
+          },
+          {
+            prop: 'deptCode',
+            label: 't-select-table使用',
+            minWidth: '280',
+            headerRequired: true,
+            canEdit: true,
+            configEdit: {
+              label: '用户名称',
+              editComponent: 't-select-table',
+              isSelfCom: true,
+              bind: {
+                isKeyup: true,
+                maxHeight: 400,
+                selectWidth: 240,
+                defaultSelectVal: [],
+                keywords: { label: 'userName', value: 'userId' },
+                table: { data: [] },
+                columns: [
+                  { prop: 'userName', label: '登录名', minWidth: '120' },
+                  { prop: 'nickName', label: '插槽使用', minWidth: '120' },
+                  { prop: 'deptName', label: '部门', minWidth: '120' },
+                  { prop: 'roleName', label: '角色', minWidth: '120' },
+                  { prop: 'descript', label: '描述', minWidth: '180' },
+                  { prop: 'createTime', label: '创建时间', minWidth: '180' },
+                ],
+              },
+              eventHandle: {
+                radioChange: ({ row, scope }) => this.radioChange(row, scope),
+              },
+            },
+          },
+          {
+            prop: 'unit',
+            label: '单位',
+            minWidth: '220',
+            canEdit: true,
+            headerRequired: true,
+            configEdit: {
+              label: '单位',
+              append: '吨',
+              rules: { required: true, message: '请输入单位', trigger: 'blur' },
+              bind: { 'prefix-icon': 'el-icon-search' },
+              editComponent: 'el-input',
+            },
+          },
+          {
+            prop: 'hobby',
+            label: '爱好单选',
+            minWidth: '180',
+            headerRequired: true,
+            canEdit: true,
+            configEdit: {
+              label: '爱好单选',
+              type: 'select-arr',
+              editComponent: 'el-select',
+              list: 'hobbyList',
+              event: 'hobbyList',
+              arrLabel: 'label',
+              arrKey: 'value',
+            },
+          },
+          {
+            prop: 'year',
+            label: '日期年',
+            minWidth: '180',
+            canEdit: true,
+            headerRequired: true,
+            configEdit: {
+              label: '日期年',
+              type: 'year',
+              editComponent: 'el-date-picker',
+              bind: { valueFormat: 'YYYY' },
+            },
+          },
+          {
+            prop: 'time',
+            label: '日期时间',
+            minWidth: '180',
+            canEdit: true,
+            configEdit: {
+              label: '日期时间',
+              type: 'datetime',
+              editComponent: 'el-date-picker',
+              bind: {
+                valueFormat: 'yyyy-MM-dd hh:mm:ss',
+              },
+            },
+          },
+          {
+            prop: 'number',
+            label: '计数器',
+            minWidth: '220',
+            canEdit: true,
+            configEdit: {
+              label: '计数器',
+              type: 'inputNumber',
+              bind: { min: 0, max: 99 },
+              editComponent: 'el-input-number',
+            },
+          },
+          {
+            prop: 'remake',
+            label: '备注',
+            minWidth: '220',
+            canEdit: true,
+            configEdit: {
+              label: '备注',
+              type: 'textarea',
+              bind: { type: 'textarea' },
+              editComponent: 'el-input',
+            },
+          },
+        ],
+        // 表格内操作列
+        operator: [
+          {
+            type: 'danger',
+            text: '删除',
+            fun: this.editDel,
+          },
+        ],
+        operatorConfig: {
+          fixed: 'right',
+        },
+      },
+      // 下拉选择项
+      listTypeInfo: {
+        hobbyList: [
+          { label: '吉他', value: '0' },
+          { label: '看书', value: '1' },
+          { label: '美剧', value: '2' },
+          { label: '旅游', value: '3' },
+          { label: '音乐', value: '4' },
+        ],
+      },
+    }
+  },
+  created() {
+    this.getSelectTableList()
+  },
+  methods: {
+    // 获取下来数据
+    getSelectTableList() {
+      const res = tselectData
+      if (res.success) {
+        this.tableData = res?.data.rows
+        this.table.columns.map(item => {
+          if (item.prop === 'deptCode') {
+            item.configEdit.bind.table.data = this.tableData
+          }
+        })
+      }
+    },
+    // 添加数据
+    add() {
+      if (this.num > 0) {
+        for (let i = 0; i < this.num; i++) {
+          this.table.data.push({ deptCode: null })
+        }
+        setTimeout(() => {
+          this.$refs.singleEditTSelectTable.clearValidate()
+        }, 100);
+      }
+    },
+    // 下拉选择表格选中
+    radioChange(row, scope) {
+      this.table.data[scope.$index].deptCode = row.userId
+    },
+    // 点击保存获取table数据
+    singleSave(data) {
+      console.log('单个单元格编辑保存', data)
+    },
+    // 错误校验提示
+    validateError(list) {
+      list.map(val => {
+        setTimeout(() => {
+          this.$message.error(`${val}是必填项！`)
+        }, 100);
+      })
+    },
+    // 另一种获取的table数据
+    save() {
+      console.log('另一种获取的table数据--save', this.$refs.singleEditTSelectTable)
+      this.$refs.singleEditTSelectTable.saveMethod((data) => {
+        console.log('另一种获取的table数据--saveMethod', data)
+      })
+    },
+    // 清除校验规则
+    clearValidate() {
+      this.$refs.singleEditTSelectTable.clearValidate()
+    },
+    // 重置表单
+    reset() {
+      this.$refs.singleEditTSelectTable.resetFields()
+    },
+    editDel(item, index, row) {
+      // console.log('9966--', this.$refs.singleEditTSelectTable.save())
+      row.splice(index, 1)
+      console.log('删除', item, row, index)
+    },
+    // 编辑每一项的change事件
+    handleEvent(type, val) {
+      switch (type) {
+        case 'hobbyList':
+          console.log('爱好选择', type, val)
+          break
+      }
+    }
+  }
+}
+</script>

docs/.vuepress/components/docsComponents/TTable/tselecttabledata.json

@@ -0,0 +1,102 @@
+{
+  "success": true,
+  "code": 200,
+  "msg": "成功",
+  "data": {
+    "pageNo": 12,
+    "total": 604,
+    "pageSize": 10,
+    "rows": [
+      {
+        "userId": 1,
+        "userName": "张丽",
+        "nickName": "装国识布西",
+        "deptName": "表音角管",
+        "roleName": "全眼进由",
+        "descript": "次响红老位期断北管确复点规子写共因装铁得带下求。",
+        "createTime": "1992-04-18 03:50:22"
+      },
+      {
+        "userId": 2,
+        "userName": "马军",
+        "nickName": "按厂加重单",
+        "deptName": "革前引活",
+        "roleName": "向难矿直",
+        "descript": "目向能律同型制相周强空体县近起矿类求海信见么存收运知马代它易手在流政果存法张断日与员体主般。",
+        "createTime": "2019-09-26 05:48:29"
+      },
+      {
+        "userId": 3,
+        "userName": "李丽",
+        "nickName": "府叫空水采",
+        "deptName": "更经应代",
+        "roleName": "例几农专",
+        "descript": "四华体此际千国基整土何约然铁把采日百每程效建五约许验十算党广线养地复青规看并场和千主记却及。",
+        "createTime": "2011-05-13 01:11:02"
+      },
+      {
+        "userId": 4,
+        "userName": "冯刚",
+        "nickName": "商过际无江",
+        "deptName": "治规质细",
+        "roleName": "族样较采",
+        "descript": "信走后干习长教教如阶地交展现精片技我话值导安明我极什才的化周十易值。",
+        "createTime": "1973-07-04 03:17:13"
+      },
+      {
+        "userId": 5,
+        "userName": "袁娟",
+        "nickName": "整规查约品",
+        "deptName": "不八区受",
+        "roleName": "万百家商",
+        "descript": "越许叫对己加基他民红书开长节加道理列米叫风完电低支战养正周形支团心办价或别发马活员场段精八权图空。",
+        "createTime": "2004-03-17 09:53:09"
+      },
+      {
+        "userId": 6,
+        "userName": "侯涛",
+        "nickName": "则斗规具所",
+        "deptName": "定种养志",
+        "roleName": "切质她劳",
+        "descript": "条引指的二表每我油住团他许外志书件济今行花包情改还政给展保际参极口老状儿管之党从水。",
+        "createTime": "1996-07-14 04:40:28"
+      },
+      {
+        "userId": 7,
+        "userName": "武刚",
+        "nickName": "况单平层称",
+        "deptName": "必交方特",
+        "roleName": "农更温基",
+        "descript": "除准期导开至即与火正现社节情太法因后须我金共温运们类意铁红准采济酸好亲象。",
+        "createTime": "2016-07-09 06:12:55"
+      },
+      {
+        "userId": 8,
+        "userName": "薛刚",
+        "nickName": "非计也着极",
+        "deptName": "劳效持何",
+        "roleName": "完消点传",
+        "descript": "标近状同先太领规方低教表处今以需器需改海多车和级持你共经起团。",
+        "createTime": "1974-12-15 10:19:15"
+      },
+      {
+        "userId": 9,
+        "userName": "毛娟",
+        "nickName": "万重切号容",
+        "deptName": "养率了你",
+        "roleName": "表报维儿",
+        "descript": "集们并千它几温料深后构线情青带那放可严加议名第。",
+        "createTime": "1982-03-09 02:06:34"
+      },
+      {
+        "userId": 10,
+        "userName": "杜秀英",
+        "nickName": "事习深图思",
+        "deptName": "后点去火",
+        "roleName": "断化值院",
+        "descript": "车较半便适制组间物外行二气料阶影办人府一老种况平生更强数石类造流表响原等系劳调看观没都四求。",
+        "createTime": "2011-01-21 06:46:18"
+      }
+    ]
+  }
+}

docs/.vuepress/config.js

@@ -176,6 +176,7 @@ module.exports = {
             'TTable/renderHeader', // 自定义列标题 label
             'TTable/treeTable',
             'TTable/rules', // 单元格编辑--校验
+            'TTable/rulesSelectTable', // 单元格编辑--TSelectTable使用校验
             'TTable/editSingle', // 单元格编辑
             'TTable/singleEditKeyup', // 单元格编辑键盘事件
             'TTable/singleEditSlot', // 单元格编辑-插槽-键盘事件

docs/baseComponents/TTable/rulesSelectTable.md

@@ -0,0 +1,10 @@
+# 单元格编辑--TSelectTable使用
+
+---
+
+<common-code-format>
+  <docsComponents-TTable-rulesSelectTable slot="source"></docsComponents-TTable-rulesSelectTable>
+
+
+<<< @/docs/.vuepress/components/docsComponents/TTable/rulesSelectTable.vue
+</common-code-format>