Merge branch 'develop' of ***REMOVED*** into develop

demo/components/advanceTableDemo.vue

@@ -1,6 +1,8 @@
 <template>
-  <div ref="doc"
-class="n-doc">
+  <div
+    ref="doc"
+    class="n-doc"
+  >
     <div class="n-doc-header">
       <n-gradient-text :font-size="20">
         AdvanceTable
@@ -13,8 +15,10 @@ class="n-doc">
           Basic use
         </div>
         <div class="n-doc-section__view">
-          <n-advance-table :columns="columns0"
-:data="data">
+          <n-advance-table
+            :columns="columns0"
+            :data="data"
+          >
             <template #table-operation>
               <n-button>custom operation by v-slot:table-operation</n-button>
             </template>
@@ -124,11 +128,13 @@ export default {
             label: 'xiaobai1',
             value: 'xiaobai1'
           }],
-          onFilter: 'custom'
+          onFilter: 'custom',
+          ellipsis:true,// 溢出隐藏，显示省略号
         },
         {
           title: 'Age',
           key: 'age',
+          align: 'center',//居中
           sortable: true,
           order: 1, // 默认升序
           sorter: (a, b) => {
@@ -725,7 +731,7 @@ export default {
     let d = new Array(20).fill(0)
     d = d.map((item, idx) => {
       return {
-        name: 'xiaobai' + idx,
+        name: 'xiaobai213213132123213111121' + idx,
         age: Math.ceil((Math.random() * 20))
       }
     })
@@ -754,7 +760,7 @@ export default {
         {
           title: 'Name',
           key: 'name',
-          filterMultiple: false,
+          ellipsis: true,
           filterItems: [{
             label: 'xiaobai1',
             value: 'xiaobai1'
@@ -780,6 +786,14 @@ export default {
           key: 'age',
           sortable: true,
           order: 1,
+          className: (params) => {
+            let row = params.row
+            if (row.age > 10) {
+              return 'older'
+            }
+            return ''
+          },
+          align: 'center',
           sorter: (a, b) => {
             return a.age - b.age
           },
@@ -982,3 +996,8 @@ export default {
   }
 }
 </script>
+<style>
+.older{
+ background:rgb(255, 204, 146);
+}
+</style>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "naive-ui",
-  "version": "0.2.70",
+  "version": "0.2.73",
   "description": "",
   "main": "index.js",
   "scripts": {

packages/common/AdvanceTable/src/main.vue

@@ -1,13 +1,17 @@
 <template>
-  <div ref="tableWrapper"
-class="n-advance-tabel__wrapper">
+  <div
+    ref="tableWrapper"
+    class="n-advance-tabel__wrapper"
+  >
     <div class="n-advance-table__operation">
       <section class="n-advance-table__operation__bacth" />
       <div class="n-advance-table__operation__custom">
         <slot name="table-operation" />
       </div>
-      <div v-if="search"
-class="n-advance-table__operation__search">
+      <div
+        v-if="search"
+        class="n-advance-table__operation__search"
+      >
         <searchInput
           ref="search"
           style=" margin-bottom: 18px;"
@@ -27,13 +31,18 @@ class="n-advance-table__operation__search">
           :key="i"
           :style="computeCustomWidthStl(column)"
         >
-        <col v-if="scrollBarWidth"
-:width="scrollBarWidth" >
+        <col
+          v-if="scrollBarWidth"
+          :width="scrollBarWidth"
+        >
       </colgroup>
       <n-thead>
         <n-tr>
-          <n-th v-for="(column, i) in columns"
-:key="column.key">
+          <n-th
+            v-for="(column, i) in columns"
+            :key="column.key"
+            :style="computeAlign(column)"
+          >
             {{ column.title }}
             <SortIcon
               v-if="column.sortable"
@@ -89,10 +98,16 @@ class="n-advance-table__operation__search">
         >
       </colgroup>
       <n-tbody>
-        <n-tr v-for="(rowData, i) in showingData"
-:key="i">
-          <n-td v-for="column in columns"
-:key="column.key">
+        <n-tr
+          v-for="(rowData, i) in showingData"
+          :key="i"
+        >
+          <n-td
+            v-for="column in columns"
+            :key="column.key"
+            :style="computeAlign(column)"
+            :class="computeTdClass(column,{row:rowData,index:i,key:column.key})"
+          >
             <row
               :index="i"
               :row="rowData"
@@ -101,8 +116,10 @@ class="n-advance-table__operation__search">
             />
           </n-td>
         </n-tr>
-        <div v-if="showingData.length === 0"
-class="n-no-data-tip">
+        <div
+          v-if="showingData.length === 0"
+          class="n-no-data-tip"
+        >
           No data
         </div>
       </n-tbody>
@@ -112,8 +129,10 @@ class="n-no-data-tip">
       v-if="pagination !== false && showingData.length"
       class="n-advanced-table__pagination"
     >
-      <n-pagination v-model="currentPage"
-:page-count="pageCount" />
+      <n-pagination
+        v-model="currentPage"
+        :page-count="pageCount"
+      />
     </div>
   </div>
 </template>
@@ -313,6 +332,7 @@ export default {
     }
   },
   watch: {
+
     currentPage () {
       if (this.pagination.custom === true) {
         this.useRemoteChange()
@@ -361,6 +381,29 @@ export default {
     // window.removeEventListener('resize', this.init)
   },
   methods: {
+    computeAlign (column) {
+      if (column.align) {
+        return {
+          'text-align': column.align
+        }
+      }
+    },
+    computeTdClass (column, params) {
+      let className = []
+      if (column.ellipsis) {
+        className.push('n-advanced-table__td-text-ellipsis')
+      }
+      if (!column.className) {
+        return className
+      }
+      if (typeof column.className === 'string') {
+        className.push(column.className)
+      } else if (typeof column.className === 'function') {
+        className.push(column.className(params))
+      }
+      console.log(className)
+      return className
+    },
     /**
      * {key:[value,value1],key1:[v1,v2]}
      * {key:value}

styles/AdvancedTable.scss

@@ -35,6 +35,27 @@
       padding-left: 32px;
     }
   }
+  .n-advanced-table__td-text-ellipsis{
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  .n-advanced-table__td-text-ellipsis>*{
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  .n-advanced-table__td-text{
+    &-center{
+      text-align: center;
+    }
+    &-left{
+      text-align: left;
+    }
+    &-right{
+      text-align: right;
+    }
+  }
   .n-advanced-table__pagination {
     margin-top: 27px;
     display: flex;