feat: changed to jsx

README.md

@@ -69,12 +69,12 @@ extendData | Object |  | 扩展数据，解决组件只能传Array Table外数
 Attr | Type | Default | Description
 --- | --- | --- | ---
 label | String |   | 列名称
-value | String |   | 列数据字段，支持多层对象嵌套，如user.email.prefix
+prop | String |   | 列数据字段，支持多层对象嵌套，如user.email.prefix
 fn | Function |   | 自定义内容替换默认value。函数参数(value, row)
 width | String |   | 列宽度
 minWidth | String | 100px  | 最小列宽度，默认'100px'
 fixed | Boolean |  false | 是否固定列
-notips | Boolean | false  | 超出cell时，是否使用tips提示，默认超过显示tips
+show-overflow-tooltip | Boolean | false  | 超出cell时，是否使用tips提示，默认超过显示tips
 hidden | Boolean |   | 是否隐藏该列。建议是一个computed，使得可以响应式显示隐藏
 
 ### handle Attrs

src/app.vue

@@ -3,12 +3,12 @@
     <el-table-plus
       :data="list"
       :fieldList="[
-        { label: 'ID', value: 'id', width: '80px' },
-        { label: '存储卷名', value: 'name', type: 'copy' },
-        { label: '总容量', value: 'storage', fn: val => `${val}G` },
-        { label: '创建人', value: 'member.userId', type: 'el-tag' },
-        { label: '邮箱', value: 'member.email' },
-        { label: '创建时间', value: 'gmtCreate' }
+        { label: 'ID', prop: 'id', width: '80px' },
+        { label: '存储卷名', prop: 'name', type: 'copy' },
+        { label: '总容量', prop: 'storage', fn: val => `${val}G` },
+        { label: '创建人', prop: 'member.userId', type: 'el-tag' },
+        { label: '邮箱', prop: 'member.email' },
+        { label: '创建时间', prop: 'gmtCreate' }
       ]"
       :handle="{
         fixed: 'right',

src/components/el-table-plus.jsx

@@ -0,0 +1,95 @@
+import UCopy from './u-copy'
+import { isFunction } from '@springleo/30-seconds-of-code'
+
+export default {
+  name: "el-table-plus",
+  components: {
+    UCopy
+  },
+  props: {
+    // 动效loading
+    loading: { type: Boolean },
+    // 列表数据
+    data: { type: Array, default: () => [] },
+    /**
+     * 表格字段列表配置。以下是每个字段可配置内容：
+     * label：列名称
+     * value：对应字段
+     * fn: 自定义内容
+     * type: 内置规则，有slot、filter、badge
+     * width： 宽度
+     * minWidth：最小宽度
+     * fixed：是否固定
+     * hidden：是否隐藏该列。建议是一个computed，使得可以响应式显示隐藏（此时tableConfig也需要是一个computed）
+     */
+    fieldList: { type: Array, default: () => [] },
+    /****
+     * 操作栏配置,主要针对点击事件
+     * width： 宽度
+     * minWidth：最小宽度
+     * fixed：是否固定
+     * btList: 按钮列表。以下是每个列表可配内容：
+     ** label: 名称，可配置为string或function
+     ** event(移除)：事件名(作用类似上面的value)。详细见func
+     ** func(新增): 按钮处理事件，单独设置事件，不再通过统一的emit发送到父组件处理。为了兼容以前的代码，优先执行func（记住不能同时拥有func和handleClick）
+     ** btType： el-link的主题色,默认是primary
+     ** icon： 图标
+     ** disabled：可配置为boolean或function
+     ** hidden：是否隐藏该列。建议是一个computed，使得可以响应式显示隐藏（此时tableConfig也需要是一个computed）
+     */
+    handle: { type: Object },
+    noData: Object, // {label, href, command}
+    extendData: Object // 组件扩展数据，解决组件只能传Array Table外数据，无法额外传入数据。
+  },
+  methods: {
+    fieldFunc(field, ...args) {
+      if (isFunction(field)) {
+        return field(...args, this.extendData)
+      } else {
+        return field
+      }
+    }
+  },
+  render(h) {
+    const getDataValue = (item, row) => item.prop.split(".").reduce((obj, cur) => obj[cur], row);
+    const renderColumns = columns => columns.filter(i => !i.hidden).map((item) => {
+      const scopedSlots = {
+        default: ({ row, $index}) => {
+          // 支持链式. 如：xxx.xxx
+          const defaultValue = getDataValue(item, row)
+
+          // 预设组件
+          if (item.type === 'copy') {
+            return <u-copy label={defaultValue} />
+          }
+          // 动态组件
+          if (['el-', 'dynamic-'].some(prefix => item.type && item.type.startsWith(prefix))) {
+            return h(item.type, defaultValue)
+          }
+
+          // 自定义组件
+          if (item.customRender) {
+            return item.customRender(h, item, $index, row)
+          }
+          // 自定义文字
+          if (item.fn) {
+            return item.fn(defaultValue, row, item)
+          }
+
+          return defaultValue
+        }
+      }
+
+      return <el-table-column key={item.prop} {...{props: item}} scopedSlots={scopedSlots} />
+    })
+
+    return (<el-table
+    ref="table"
+    v-loading={this.loading}
+    data={this.data}
+    {...{props: this.$attrs, on: this.$listeners}}
+  >
+      {renderColumns(this.fieldList)}
+  </el-table>)
+  }
+};

src/components/index.js

@@ -1,12 +1,10 @@
-import Component from "./el-table-plus.vue";
-import { getDataValue } from "./util";
+import Component from "./el-table-plus.jsx";
 
 function install(Vue, options = {}) {
   if (install.installed) return;
   install.installed = true;
 
   Vue.component("el-table-plus", Component);
-  Vue.prototype.$getDataValue = (...args) => getDataValue(Vue, ...args);
   Vue.prototype.$ELEMENT_PLUS = options
 }
 Component.install = install;