temp

├── docs ├── .nojekyll ├── index.html └── README.md ├── .babelrc ├── .gitignore ├── src ├── index.js ├── text.js ├── methods.js └── main.vue ├── index.html ├── dev ├── main.js ├── cell-btn.vue ├── cell-editor.vue ├── data.js └── App.vue ├── LICENSE ├── package.json ├── rollup.config.js ├── webpack.config.js └── README.md /docs/.nojekyll: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { "modules": false }] 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | lib/ 5 | npm-debug.log 6 | yarn-error.log 7 | 8 | # Editor directories and files 9 | .idea 10 | *.suo 11 | *.ntvs* 12 | *.njsproj 13 | *.sln 14 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import Main from './main.vue' 2 | import methods from './methods' 3 | Main.install = function (Vue) { 4 | Vue.component(Main.name, Main) 5 | } 6 | Main._mixinsMethods = methods 7 | export default Main 8 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | temp 6 | 7 | 8 |

9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /dev/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import ElementUI from 'element-ui' 3 | import App from './App.vue' 4 | // 1.4.12 5 | // import 'element-ui/lib/theme-default/index.css' 6 | import 'element-ui/lib/theme-chalk/index.css' 7 | 8 | Vue.use(ElementUI) 9 | 10 | new Vue({ 11 | el: '#app', 12 | render: h => h(App) 13 | }) 14 | -------------------------------------------------------------------------------- /src/text.js: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | functional: true, 4 | props: ['row', 'col', 'column'], 5 | render (h, { props: { row, col }, _v: text }) { 6 | const { formater } = col 7 | const v = formater && formater(row, col) || row[col.prop] 8 | // 解决 umd 打包 text 渲染不出来的问题，需要转成 Vnode 9 | return text && text(v) || v 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /dev/cell-btn.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 17 | 18 | -------------------------------------------------------------------------------- /dev/cell-editor.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 21 | 22 | -------------------------------------------------------------------------------- /src/methods.js: -------------------------------------------------------------------------------- 1 | const METHOD_NAMES = [ 2 | "setCurrentRow", 3 | "toggleRowSelection", 4 | "toggleRowExpansion", 5 | "clearSelection", 6 | "clearFilter", 7 | "clearSort", 8 | "doLayout", 9 | "sort" 10 | ] 11 | 12 | const methods = {} 13 | 14 | METHOD_NAMES.forEach(name => { 15 | methods[name] = function (...args) { 16 | const { grid } = this.$refs 17 | if (grid && grid[name]) { 18 | grid[name](...args) 19 | } 20 | } 21 | }) 22 | 23 | export default { methods } 24 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | egrid - element-ui table packaging 6 | 7 | 8 | 9 | 10 | 11 |

12 | 13 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 青鲤锦时 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "egrid", 3 | "description": "element-ui table packaging component", 4 | "version": "1.1.2", 5 | "author": "芊野 ", 6 | "private": false, 7 | "repository": { 8 | "type": "git", 9 | "url": "git@github.com:kinglisky/egrid.git" 10 | }, 11 | "main": "lib/index.com.min.js", 12 | "scripts": { 13 | "clear": "rm -rf lib", 14 | "doc": "docsify serve docs", 15 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 16 | "build": "npm run clear && node rollup.config.js" 17 | }, 18 | "devDependencies": { 19 | "babel-core": "^6.26.0", 20 | "babel-helpers": "^6.24.1", 21 | "babel-loader": "^7.1.2", 22 | "babel-plugin-external-helpers": "^6.22.0", 23 | "babel-preset-env": "^1.6.0", 24 | "babel-preset-es2015-rollup": "^3.0.0", 25 | "cross-env": "^5.1.3", 26 | "css-loader": "^0.28.8", 27 | "docsify": "^4.5.7", 28 | "file-loader": "^1.1.6", 29 | "rollup": "^0.55.3", 30 | "rollup-plugin-babel": "^3.0.3", 31 | "rollup-plugin-commonjs": "^8.2.6", 32 | "rollup-plugin-node-resolve": "^3.0.0", 33 | "rollup-plugin-uglify": "^2.0.1", 34 | "rollup-plugin-vue2": "^0.8.0", 35 | "style-loader": "^0.19.1", 36 | "uglify-es": "^3.3.4", 37 | "url-loader": "^0.6.2", 38 | "vue": "^2.5.13", 39 | "vue-loader": "^13.6.2", 40 | "vue-template-compiler": "^2.5.13", 41 | "webpack": "^3.10.0", 42 | "webpack-dev-server": "^2.9.7" 43 | }, 44 | "peerDependencies": { 45 | "element-ui": "^2.0.10" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /dev/data.js: -------------------------------------------------------------------------------- 1 | export default { 2 | data: [ 3 | { 4 | date: '2016-05-03', 5 | name: '王小虎', 6 | province: '上海', 7 | city: '普陀区', 8 | address: '上海市普陀区金沙江路 1518 弄', 9 | zip: 200333 10 | }, 11 | { 12 | date: '2016-05-02', 13 | name: '王小虎', 14 | province: '上海', 15 | city: '普陀区', 16 | address: '上海市普陀区金沙江路 1518 弄', 17 | zip: 200333 18 | }, 19 | { 20 | date: '2016-05-04', 21 | name: '王小虎', 22 | province: '上海', 23 | city: '普陀区', 24 | address: '上海市普陀区金沙江路 1518 弄', 25 | zip: 200333 26 | }, 27 | { 28 | date: '2016-05-01', 29 | name: '王小虎', 30 | province: '上海', 31 | city: '普陀区', 32 | address: '上海市普陀区金沙江路 1518 弄', 33 | zip: 200333 34 | }, 35 | { 36 | date: '2016-05-08', 37 | name: '王小虎', 38 | province: '上海', 39 | city: '普陀区', 40 | address: '上海市普陀区金沙江路 1518 弄', 41 | zip: 200333 42 | }, 43 | { 44 | date: '2016-05-06', 45 | name: '王小虎', 46 | province: '上海', 47 | city: '普陀区', 48 | address: '上海市普陀区金沙江路 1518 弄', 49 | zip: 200333 50 | }, 51 | { 52 | date: '2016-05-07', 53 | name: '王小虎', 54 | province: '上海', 55 | city: '普陀区', 56 | address: '上海市普陀区金沙江路 1518 弄', 57 | zip: 200333 58 | } 59 | ], 60 | columns: [ 61 | { name: '日期', prop: 'date' }, 62 | { name: '姓名', prop: 'name' }, 63 | { name: '省份', prop: 'province' }, 64 | { name: '市区', prop: 'city' }, 65 | { name: '地址', prop: 'address' }, 66 | { name: '邮编', prop: 'zip' } 67 | ] 68 | } 69 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | const rollup = require('rollup') 2 | const vue = require('rollup-plugin-vue2') 3 | const resolve = require('rollup-plugin-node-resolve') 4 | const babel = require('rollup-plugin-babel') 5 | const uglify = require('rollup-plugin-uglify') 6 | const ug = require('uglify-es') 7 | const babelHelpers = require('babel-helpers') 8 | const externalHelpersWhitelist = babelHelpers.list.filter(helperName => { 9 | return helperName !== 'asyncGenerator' 10 | }) 11 | const plugins = [ 12 | vue(), 13 | resolve({ 14 | extensions: ['.js', '.vue'] 15 | }), 16 | babel({ 17 | exclude: 'node_modules/**', 18 | plugins: ['external-helpers'], 19 | externalHelpersWhitelist 20 | }) 21 | ] 22 | 23 | const config = { 24 | name: 'Egrid', 25 | entry: './src/index.js', 26 | dist: 'lib/index' 27 | } 28 | 29 | const pkgs = [ 30 | { format: 'cjs', suffix: '.com.js' }, 31 | { format: 'cjs', suffix: '.com.min.js', min: true }, 32 | { format: 'es', suffix: '.esm.js' }, 33 | { format: 'es', suffix: '.esm.min.js', min: true }, 34 | { format: 'umd', suffix: '.umd.js' }, 35 | { format: 'umd', suffix: '.umd.min.js', min: true } 36 | ] 37 | 38 | pkgs.forEach(runRollup) 39 | 40 | function runRollup (it) { 41 | rollup.rollup({ 42 | input: config.entry, 43 | external: ['vue', 'element-ui/lib/table', 'element-ui/lib/table-column'], 44 | plugins: it.min ? plugins.concat(uglify({}, ug.minify)) : plugins 45 | }) 46 | .then(bundle => { 47 | bundle.write({ 48 | format: it.format, 49 | name: config.name, 50 | globals: { 51 | 'vue': 'Vue', 52 | 'element-ui/lib/table': 'ELEMENT.Table', 53 | 'element-ui/lib/table-column': 'ELEMENT.TableColumn' 54 | }, 55 | file: config.dist + it.suffix 56 | }) 57 | }) 58 | .catch(e => { 59 | console.log(`${it.format} - 打包出错：`, e) 60 | process.exit(1) 61 | }) 62 | } 63 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | 4 | module.exports = { 5 | entry: './dev/main.js', 6 | output: { 7 | path: path.resolve(__dirname, './dist'), 8 | publicPath: '/dist/', 9 | filename: 'build.js' 10 | }, 11 | module: { 12 | rules: [ 13 | { 14 | test: /\.vue$/, 15 | loader: 'vue-loader', 16 | options: { 17 | loaders: { 18 | } 19 | // other vue-loader options go here 20 | } 21 | }, 22 | { 23 | test: /\.js$/, 24 | loader: 'babel-loader', 25 | exclude: /node_modules/ 26 | }, 27 | { 28 | test: /\.css$/, 29 | use: ['style-loader', 'css-loader'] 30 | }, 31 | { 32 | test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/, 33 | loader: 'file-loader' 34 | }, 35 | { 36 | test: /\.(png|jpg|gif|svg)$/, 37 | loader: 'file-loader', 38 | options: { 39 | name: '[name].[ext]?[hash]' 40 | } 41 | } 42 | ] 43 | }, 44 | resolve: { 45 | alias: { 46 | 'vue$': 'vue/dist/vue.esm.js' 47 | } 48 | }, 49 | devServer: { 50 | historyApiFallback: true, 51 | noInfo: true, 52 | overlay: true 53 | }, 54 | performance: { 55 | hints: false 56 | }, 57 | devtool: '#eval-source-map' 58 | } 59 | 60 | if (process.env.NODE_ENV === 'production') { 61 | module.exports.devtool = '#source-map' 62 | // http://vue-loader.vuejs.org/en/workflow/production.html 63 | module.exports.plugins = (module.exports.plugins || []).concat([ 64 | new webpack.DefinePlugin({ 65 | 'process.env': { 66 | NODE_ENV: '"production"' 67 | } 68 | }), 69 | new webpack.optimize.UglifyJsPlugin({ 70 | sourceMap: true, 71 | compress: { 72 | warnings: false 73 | } 74 | }), 75 | new webpack.LoaderOptionsPlugin({ 76 | minimize: true 77 | }) 78 | ]) 79 | } 80 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Egrid 2 | 3 | ### 基于 `Element-UI` `Table` 组件封装的高阶表格组件，可无缝支持 element 的 table 组件。 4 | 5 | element 升级到了 2.0 了，不用担心可以无缝升级的~ 6 | 7 | 文档 [http://kinglisky.github.io/egrid](http://kinglisky.github.io/egrid) 8 | 9 | 10 | ### 开发 11 | 12 | > `npm run dev` 13 | 14 | > `npm run build` 15 | 16 | > `npm run doc` 17 | 18 | 19 | ### 使用 20 | 21 | 安装 Element： 22 | 23 | > `npm i element-ui -S` 24 | 25 | 安装 egrid: 26 | 27 | > `npm i egrid -S` 28 | 29 | `egrid` 只依赖 `Element` 中的 `Table` 与 `TableColumn` 组件不会将整个 `Element` 导入。 30 | 但不包含样式，`Table` 的样式需要用户手动引入。 31 | 32 | 使用： 33 | ```javascript 34 | import Vue from 'vue' 35 | import Egrid from 'egrid' 36 | 37 | // table 的样式需要手动引入 38 | import 'element-ui/lib/theme-default/icon.css' 39 | import 'element-ui/lib/theme-default/table.css' 40 | import 'element-ui/lib/theme-default/table-column.css' 41 | 42 | 43 | 44 | 45 | 46 | Vue.use(Egrid) 47 | ``` 48 | 49 | 为什么要在 element table 组价之上再封装一层呢？ 50 | 51 | 平时我们使用的 element table 时候往往是这样写的： 52 | 53 | ```html 54 | 93 | ``` 94 | 95 | 如果每次使用表格都要重复这一段代码，那久而久之你的项目肯定会冗余很多重复的代码，而且也不利于维护。 96 | 这时候我们就有必要在原始的表格组件基础上再封装一层，将这些重复的代码放在组件内部，使用时考虑如何通过一种配置的方式去定制表格。 97 | 98 | `egrid` 就是为此而生的，少写两行是两行。耶~~~ 99 | 100 | 101 | -------------------------------------------------------------------------------- /dev/App.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 120 | 121 | 136 | -------------------------------------------------------------------------------- /src/main.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 174 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | # Egrid 2 | 3 | 基于 `Element-UI` `Table` 组件封装的高阶表格组件，可无缝支持 element 的 table 组件。 4 | 5 | min 文件仅 3.8 kb。实现比较简单，源码在这： [https://github.com/kinglisky/egrid](https://github.com/kinglisky/egrid) 6 | 7 | element 升级到了 2.0 了，不用担心可以直接用。 8 | 9 | 首先组件依赖 `Element Table`，先要安装 Element： 10 | 11 | > `npm i element-ui -S` 12 | 13 | 安装 egrid: 14 | 15 | > `npm i egrid -S` 16 | 17 | !> `egrid` 只依赖 `Element` 中的 `Table` 与 `TableColumn` 组件不会将整个 `Element` 导入。 18 | 但不包含样式，`Table` 的样式需要用户手动引入。 19 | 20 | 使用： 21 | 22 | ```javascript 23 | import Vue from 'vue' 24 | import Egrid from 'egrid' 25 | 26 | // table 的样式需要手动引入 27 | import 'element-ui/lib/theme-default/icon.css' 28 | import 'element-ui/lib/theme-default/table.css' 29 | import 'element-ui/lib/theme-default/table-column.css' 30 | 31 | Vue.use(Egrid) 32 | ``` 33 | 34 | 在线栗子🌰 ： 35 | 38 | 39 | 先创建表格中使用的自定义组件： 40 | 41 | `cell-btn.vue` 42 | ```html 43 | 46 | 47 | 59 | ``` 60 | 61 | `cell-editor.vue` 62 | ```html 63 | 71 | 72 | 83 | ``` 84 | 85 | 使用 `egrid`: 86 | 87 | ```html 88 | 100 | 101 | 163 | ``` 164 | 165 | 166 | # Attributes 167 | 168 | !> `egrid` 只是在 `Element Table` 封装了一层，原本设置在 `Table` 上的 `props` 与事件监听可直接设置到 `egrid` 上，如：`height` `max-height` `border` `@selection-change`......具体配置可参考[Element Tabel 文档](http://element.eleme.io/#/zh-CN/component/table#table-attributes) 169 | 170 | | 属性 | 说明 | 可选项 | 默认 | 171 | | --- | ---- | --- | --- | 172 | | `data` | `Array` table 的 data 属性 | - | `[]` | 173 | | `columns` | `Array` 用于控制表格列渲染 | - | `[]` | 174 | | `column-type` | `[String, Array]` 映射到 `Element Table-column` 的 `type` 属性，用于支持功能特殊的功能列（多选、索引、折叠行），不设置则不显示功能列 | `selection/index/expand` | - | 175 | | `column-key-map` | `Object` 用于映射 `Table-column` 中 `label` 与 `prop` 值对应的 key | - | `{ label: 'label', prop: 'prop' }` | 176 | | `columns-props` | `Object` 用于定义所有 `columns` 公共的 `Element Table-column` 属性 | - | - | 177 | | `columns-schema` | `Object` 可以用来单独定义 `columns` 的某一列，这里的设置会覆盖 `columnsProps` 的配置属性
使用 `Element Table-column` 中 `label` 值进行匹配 | - | - | 178 | | `columns-handler` | `Function` 可用于在现有的 `columns` 进行操作，对 `columns` 进行增删改操作。 | - | - | 179 | | `slot-append` | `Boolean` 是否使用 `Element Table` 的 `slot="append"` | `true/false` | `false` | 180 | 181 | 182 | > columns 配置 183 | 184 | columns 用于控制表格的列行为，使用时一般会设置成： 185 | 186 | ```javascript 187 | const columns = [ 188 | { 189 | label: '日期', 190 | prop: 'date', 191 | width: 100 192 | ... 193 | }, 194 | { 195 | label: '姓名', 196 | prop: 'name', 197 | minWidth: 100 198 | ... 199 | }, 200 | { 201 | label: '其他', 202 | component: Btn, // 'el-button' 203 | listeners: { 204 | 'custom-event' (data) { 205 | console.log('custom-event', data) 206 | } 207 | }, 208 | propsHandler: function ({ row, col, column }) { 209 | return { row, col, column } 210 | } 211 | ...... 212 | } 213 | ...... 214 | ] 215 | ``` 216 | 217 | `columns` 中每项的配置项其实就是 `Element Table-column` 上的 `props` 属性，具体的属性设置可以参考 [Element Table-column 文档](http://element.eleme.io/#/zh-CN/component/table#table-column-attributes)。 218 | 219 | 在此基础上 `columns` 新增了 `component` `listeners` `propsHandler` 配置属性。当然你也可以自定义一些其他的属性附加到 `columns` 上以便后期自定组件中使用，例如附加一些处理函数传递给自定义组件使用。 220 | 221 | `component` 222 | 用于配置当前列渲染用的自定义组件，内部使用 `` 实现的，component 的值可以是：`string | ComponentDefinition | ComponentConstructor` 具体参考 [ 组件文档](https://cn.vuejs.org/v2/api/#component) 223 | 224 | 225 | `listeners` 226 | 用于监听 `component` 配置的自定义渲染组件内部 `$emit` 出的事件，这里使用 Vue 2.4 引入 `v-on` [新语法](https://cn.vuejs.org/v2/api/#v-on)，可直接为 `v-on` 绑定一个对象，如： 227 | ```javascrip 228 | v-on="{ 'custom-event': function (data) {...} }" 229 | ``` 230 | 231 | `propsHandler` 232 | 233 | 用于转化 `egrid` 组件内部附加 `` 上的 props 。默认的附加在 `` 上的 props 是： 234 | 235 | ```html 236 | 237 | ``` 238 | 239 | 可通过 `propsHandler` 对 `{ row, col, column }` 进行转化你想要的形式： 240 | 241 | ```javascript 242 | propsHandler({ row, col, column }) 243 | 244 | // 转化成 => 245 | 246 | { 247 | msg: row[col.prop], 248 | handler (data) { 249 | console.log('handler:', data) 250 | } 251 | } 252 | 253 | ``` 254 | > columns-props 配置 255 | 256 | `columns-props` 配置用于定义 `columns` 各列默认的 props 属性。如所有的列默认都**居左对齐**，**不支持排序**，我们可以将 columns-props 设置成： 257 | 258 | ```javascript 259 | { 260 | align: 'left', 261 | sortable: false 262 | } 263 | ``` 264 | 如需要为某些列单独定义显示行为可以通过 `columns-schema` 进行单独配置。 265 | 266 | > columns-schema 配置 267 | 268 | `columns-schema` 主要用于单独定义某一列的行为。 269 | 270 | ```javascript 271 | { 272 | '地址': { 273 | width: 300, 274 | sortable: false, 275 | ... 276 | component: CustomComponent 277 | } 278 | } 279 | 280 | ``` 281 | 282 | `columns-schema` 是通过 columns 每列的 `label` 属性值来匹配的。这里的配置属性会覆盖 `columns-props` 与 `columns` 设置的对应的列的属性值。 283 | 284 | !> 覆盖的优先级为 `columns-schema` > `columns` > `columns-props` 285 | 286 | > columns-handler 配置 287 | 288 | `columns-handler` 处理函数可以对已有的 `columns` 进行增删改操作，常见的用法就是为，`columns` 新增一个自定义的操作列： 289 | 290 | ```javascript 291 | // :columns-handler="columnsHandler" 292 | columnsHandler (cols) { 293 | return cols.concat({ 294 | label: '操作', 295 | align: 'left', 296 | sortable: false, 297 | ... 298 | component: OperatComponent, 299 | }) 300 | } 301 | ``` 302 | > column-type 配置 303 | 304 | 映射到 `Element Table-column` 的 `type` 属性，用于特殊的功能列的功能，不设置则不显示功能列。 305 | 306 | * `selection`：多选支持 307 | 308 | * `index`：编号索引 309 | 310 | * `expand`：表格支持折叠展开行 311 | 312 | 当 `column-type` 为 `expand` 时表格支持折叠展开行，此时可用通过 `slot (slot="expand")` 方式自定渲染折叠详情。 313 | 314 | 当 `column-type` 为数组时可设置多个特殊列，`['expand', 'index', 'selection']`，一般很少这样使用。 315 | 316 | 使用可参考下面的栗子🌰 ： 317 | 318 | 322 | 323 | > `column-key-map` 配置 324 | 325 | 考虑到 `columns` 中的 `label` 项与 `prop` 项对应的属性 key 不一定是 `label` 与 `prop`，这时可以通过 `column-key-map` 做个映射。 326 | 327 | 328 | 329 | # Methods 330 | 331 | ```javascript 332 | [ 333 | 'setCurrentRow', 334 | 'toggleRowSelection', 335 | 'toggleRowExpansion', 336 | 'clearSelection', 337 | 'clearFilter', 338 | 'clearSort', 339 | 'doLayout', 340 | 'sort' 341 | ] 342 | ``` 343 | 344 | !> 直接代理一层原 `Element Table` 的方法。可参考[文档](http://element.eleme.io/#/zh-CN/component/table#table-methods) 345 | 346 | 347 | # Slots 348 | 349 | `append`：对应 `Element Table` 的 `slot="append"` [可参考文档](http://element.eleme.io/#/zh-CN/component/table#table-slot)，使用时注意设置 `slot-append` 为 `true` 350 | 351 | `expand`：当 `column-type` 为 `expand` 时使用，用于自定义折叠展开内容。 352 | 353 | 354 | 355 | --------------------------------------------------------------------------------