Merge pull request #19 from Tencent/feature_table_filter_reset

feat(table): add reset and confirm to table filter
Tencent · Dec 23, 2021 · 54bca58 · 54bca58
2 parents 7a61140 + 9909f6a
commit 54bca58
Show file tree

Hide file tree

Showing 31 changed files with 7,607 additions and 8,237 deletions.
diff --git a/examples/select/demos/base.vue b/examples/select/demos/base.vue
@@ -1,19 +1,12 @@
 <template>
   <div class="tdesign-demo-select-base">
-
     <!-- 方式一：使用 options 输出下拉选项。优先级高于 t-option-->
     <t-select v-model="value1" :options="options1" placeholder="请选择云解决方案" />
 
     <!-- 方式二：使用 t-option 输出下拉选项。options 和 t-option 两种实现方式二选一即可 -->
     <t-select v-model="value2" placeholder="请选择云产品">
-      <t-option
-        v-for="item in options2"
-        :value="item.value"
-        :label="item.label"
-        :key="item.value"
-      ></t-option>
+      <t-option v-for="item in options2" :value="item.value" :label="item.label" :key="item.value"></t-option>
     </t-select>
-
   </div>
 </template>
 

diff --git a/examples/select/demos/custom-selected.vue b/examples/select/demos/custom-selected.vue
@@ -1,6 +1,5 @@
 <template>
   <div>
-
     <!-- 自定义选中项内容，valueDisplay 为渲染函数（function） -->
     <t-select
       v-model="value1"
@@ -10,24 +9,13 @@
       multiple
       clearable
     />
-    <br/><br/>
+    <br /><br />
 
     <!-- 自定义选中项内容，valueDisplay 为 插槽(slot) -->
-    <t-select
-      v-model="value2"
-      :options="options"
-      placeholder="请选择"
-      multiple
-      clearable
-    >
+    <t-select v-model="value2" :options="options" placeholder="请选择" multiple clearable>
       <template #valueDisplay="{ value, onClose }">
-        <t-tag
-          v-for="(item, index) in value"
-          :key="index"
-          :closable="true"
-          :onClose="() => onClose(index)"
-        >
-          {{item.label}}({{item.value[0].toUpperCase()}})
+        <t-tag v-for="(item, index) in value" :key="index" :closable="true" :onClose="() => onClose(index)">
+          {{ item.label }}({{ item.value[0].toUpperCase() }})
         </t-tag>
       </template>
     </t-select>
@@ -57,11 +45,7 @@ export default {
     valueDisplay(h, { value, onClose }) {
       if (!(value instanceof Array)) return;
       return value.map((item, index) => (
-        <t-tag
-          key={index}
-          closable={true}
-          onClose={() => onClose(index)}
-        >
+        <t-tag key={index} closable={true} onClose={() => onClose(index)}>
           {item.label}({item.value[0].toUpperCase()})
         </t-tag>
       ));

diff --git a/examples/select/demos/filterable.vue b/examples/select/demos/filterable.vue
@@ -4,7 +4,7 @@
       v-model="value"
       placeholder="-请选择-"
       :options="options"
-      style="width: 200px;display: inline-block;margin: 0 20px 20px 0;"
+      style="width: 200px; display: inline-block; margin: 0 20px 20px 0"
       filterable
       @blur="handleBlur"
       @focus="handleFocus"
@@ -16,7 +16,7 @@
       placeholder="-请选择-"
       :options="options"
       :filter="filterMethod"
-      style="width: 400px;display: inline-block;"
+      style="width: 400px; display: inline-block"
       @blur="handleBlur"
       @focus="handleFocus"
     />

diff --git a/examples/select/demos/group.vue b/examples/select/demos/group.vue
@@ -11,12 +11,7 @@
         :label="typeof list.group === 'object' ? list.group.label : list.group"
         divider
       >
-        <t-option
-          v-for="item in list.children"
-          :value="item.value"
-          :label="item.label"
-          :key="item.value"
-        >
+        <t-option v-for="item in list.children" :value="item.value" :label="item.label" :key="item.value">
           {{ item.label }}
         </t-option>
       </t-option-group>

diff --git a/examples/select/demos/status.vue b/examples/select/demos/status.vue
@@ -1,12 +1,10 @@
 <template>
   <div class="tdesign-demo-select-base">
-
     <t-select v-model="value1" :options="options" placeholder="请选择云解决方案" />
 
     <t-select v-model="value2" :options="options" disabled placeholder="请选择云解决方案" />
 
     <t-select v-model="value3" :options="options" loading placeholder="请选择云解决方案" />
-
   </div>
 </template>
 

diff --git a/examples/table/demos/expandable.vue b/examples/table/demos/expandable.vue
@@ -18,7 +18,7 @@
     <t-checkbox v-model="expandOnRowClick">允许点击行之后展开/收起</t-checkbox>
 
     <t-table
-      row-key='id'
+      row-key="id"
       :columns="columns"
       :data="data"
       :expanded-row-keys="expandedRowKeys"
@@ -40,34 +40,14 @@
 
     <!-- </t-config-provider> -->
 
-    <div style="margin: 16px 0px;">支持名为 expandedRow 的插槽写法</div>
-
-    <t-table
-      row-key='id'
-      :columns="columns"
-      :data="data"
-      :expanded-row-keys="expandedRowKeys"
-      @expand-change="rehandleExpandChange"
-      :expandIcon="expandIcon"
-      :expandOnRowClick="expandOnRowClick"
-    >
-      <template #expandedRow="{ row }">
-        <div class="more-detail">
-          <p class="title"><b>集群名称:</b></p><p class="content">{{row.instance}}</p><br/>
-          <p class="title"><b>管理员:</b></p><p class="content">{{row.owner}}</p><br/>
-          <p class="title"><b>描述:</b></p><p class="content">{{row.description}}</p>
-        </div>
-      </template>
-      <template #status="{ row }">
-        <p v-if="row.status === 0" class="status">健康</p>
-        <p v-if="row.status === 1" class="status unhealth">异常</p>
-      </template>
-      <template #op-column><p>操作</p></template>
-      <template #op="slotProps">
-        <a class="link" @click="rehandleClickOp(slotProps)">管理</a>
-        <a class="link" @click="rehandleClickOp(slotProps)">删除</a>
-      </template>
-    </t-table>
+    <!-- !! 也可以使用具名插槽 `expandedRow` 自定义展开行内容 !! -->
+    <!-- <template #expandedRow="{ row }">
+      <div class="more-detail">
+        <p class="title"><b>集群名称:</b></p><p class="content">{{row.instance}}</p><br/>
+        <p class="title"><b>管理员:</b></p><p class="content">{{row.owner}}</p><br/>
+        <p class="title"><b>描述:</b></p><p class="content">{{row.description}}</p>
+      </div>
+    </template> -->
   </div>
 </template>
 
@@ -77,26 +57,48 @@ import { ChevronRightIcon, ChevronRightCircleIcon } from 'tdesign-icons-vue';
 const columns = [
   { colKey: 'instance', title: '集群名称', width: 150 },
   {
-    colKey: 'status', title: '状态', width: 100, cell: 'status',
+    colKey: 'status',
+    title: '状态',
+    width: 100,
+    cell: 'status',
   },
   { colKey: 'owner', title: '管理员' },
   { colKey: 'description', title: '描述' },
   {
-    colKey: 'op', width: 200, title: 'op-column', cell: 'op',
+    colKey: 'op',
+    width: 200,
+    title: 'op-column',
+    cell: 'op',
   },
 ];
 const data = [
   {
-    id: 1, instance: '集群测试1', status: 0, owner: 'jenny;peter', description: '隐藏展开图标',
+    id: 1,
+    instance: '集群测试1',
+    status: 0,
+    owner: 'jenny;peter',
+    description: '隐藏展开图标',
   },
   {
-    id: '2', instance: '集群测试2', status: 1, owner: 'jenny', description: 'test',
+    id: '2',
+    instance: '集群测试2',
+    status: 1,
+    owner: 'jenny',
+    description: 'test',
   },
   {
-    id: 3, instance: '集群测试3', status: 0, owner: 'jenny', description: '自定义图标',
+    id: 3,
+    instance: '集群测试3',
+    status: 0,
+    owner: 'jenny',
+    description: '自定义图标',
   },
   {
-    id: 4, instance: '集群测试4', status: 1, owner: 'peter', description: 'test',
+    id: 4,
+    instance: '集群测试4',
+    status: 1,
+    owner: 'peter',
+    description: 'test',
   },
 ];
 export default {
@@ -112,9 +114,20 @@ export default {
       // defaultExpandedRowKeys: ['2', 4],
       expandedRow: (h, { row }) => (
         <div class="more-detail">
-          <p class="title"><b>集群名称:</b></p><p class="content">{row.instance}</p><br/>
-          <p class="title"><b>管理员:</b></p><p class="content">{row.owner}</p><br/>
-          <p class="title"><b>描述:</b></p><p class="content">{row.description}</p>
+          <p class="title">
+            <b>集群名称:</b>
+          </p>
+          <p class="content">{row.instance}</p>
+          <br />
+          <p class="title">
+            <b>管理员:</b>
+          </p>
+          <p class="content">{row.owner}</p>
+          <br />
+          <p class="title">
+            <b>描述:</b>
+          </p>
+          <p class="content">{row.description}</p>
         </div>
       ),
       globalLocale: {
@@ -167,25 +180,25 @@ export default {
 }
 .status {
   position: relative;
-  color: #00A870;
+  color: #00a870;
   margin-left: 10px;
   &::before {
     position: absolute;
     top: 50%;
     left: 0px;
     transform: translateY(-50%);
     content: '';
-    background-color: #00A870;
+    background-color: #00a870;
     width: 6px;
     height: 6px;
     margin-left: -10px;
     border-radius: 50%;
   }
 }
 .status.unhealth {
-  color: #E34D59;
+  color: #e34d59;
   &::before {
-    background-color: #E34D59;
+    background-color: #e34d59;
   }
 }
 .more-detail {

diff --git a/examples/table/demos/filter-controlled.vue b/examples/table/demos/filter-controlled.vue
@@ -15,14 +15,7 @@
     /> -->
 
     <!-- filter-value.sync 等同于 filter-value + filter-change -->
-    <t-table
-      rowKey='key'
-      :columns="columns"
-      :data="data"
-      :filter-value="filterValue"
-      @filter-change="onFilterChange"
-    />
-
+    <t-table rowKey="key" :columns="columns" :data="data" :filter-value="filterValue" @filter-change="onFilterChange" />
   </div>
 </template>
 
@@ -77,6 +70,7 @@ export default {
           // 单选过滤配置
           filter: {
             type: 'single',
+            // showConfirmAndReset: true,
             list: [
               { label: 'anyone', value: '' },
               { label: 'Heriberto', value: 'Heriberto' },
@@ -90,6 +84,8 @@ export default {
           // 多选过滤配置
           filter: {
             type: 'multiple',
+            // 是否显示重置取消按钮，一般情况不需要显示
+            showConfirmAndReset: true,
             list: [
               { label: 'All', checkAll: true },
               { label: 'Skures', value: 'Skures' },
@@ -103,7 +99,13 @@ export default {
           // 输入框过滤配置
           filter: {
             type: 'input',
-            props: { placeholder: '输入关键词过滤' },
+            resetValue: '@',
+            props: {
+              placeholder: '输入关键词过滤',
+              clearable: true,
+            },
+            // 是否显示重置取消按钮
+            showConfirmAndReset: true,
           },
         },
         {
@@ -112,9 +114,7 @@ export default {
           // 自定义过滤组件
           filter: {
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            component: (h) => (
-              <t-date-picker defaultValue={''} clearable/>
-            ),
+            component: (h) => <t-date-picker clearable />,
           },
         },
       ],