lee-easy-table

安装

安装插件,在项目根目录[root]下打开终端，运行以下指令：

bash

npm install lee-element-ui --save

全局引入或按需引入组件

javascript

import leeElementUi from "lee-element-ui";
import "lee-element-ui/lib/lee-element-ui.css";

Vue.use(leeElementUi);

------

import {leeEasyTable} from "lee-element-ui";
import "lee-element-ui/lib/lee-element-ui.css";

Vue.use(leeEasyTable); // 目前组件css还未拆分

使用说明

使用数据进行配置，可以满足基本开发场景，如果需要更定制化的开发，更推荐使用原生组件进行二次开发使用起来也很简单

vue

<template>
<lee-easy-table :options="option"></lee-easy-table>
</template>
<script>
exprot default {
 data(){
     return {
         option:{
             //其他配置，会通过$attr和$props传递给el-table
             //...
             //同el-table 的 :data
             data:[], 
             // 同el-table-column的数据化配置
             columns:[
                 {label:"日期",prop:"date",width:"180"},
                 {label:"姓名",prop:"name",width:"180"},
                 {label:"地址",prop:"address"},
             ] 
         }
     }
 }
}
</script>

以上写法等同于原生组件写法

vue

<template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>

  <script>
    export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      }
    }
  </script>

进阶用法（一）,使用插槽，而不必罗列所有列，比如上面的表格，我只想改变姓名的列：使用对应prop来获取插槽:

vue

        <lee-easy-table
          :options="Data_table_options"
        >
          <!-- 插槽-姓名 使用prop来取得对应列的插槽，列的数据已经内置 -->
          <template #name="{ scope:{row, column, $index, store} }">
            {{ row }}
          </template>
        </lee-easy-table>

进阶用法（二）,使用插槽，而不必罗列所有列，比如上面的表格，我只想改变姓名的列的表头：使用对应prop_header来获取插槽:

vue

        <lee-easy-table
          :options="Data_table_options"
        >
          <!-- 插槽-姓名 使用prop来取得对应列的插槽，列的数据已经内置 -->
          <template #name_header="{ scope:{row, column, $index, store} }">
            {{ row }}
          </template>
        </lee-easy-table>

进阶用法（三）,使用插槽，而不必罗列所有列，比如上面的表格，我想要增加复选或者index：使用前置插槽（固定写法 pre_column）

vue

        <lee-easy-table
          :options="Data_table_options"
        >
          <!-- 前置插槽 -->
          <template #pre_column>
            <el-table-column
              label="系统编号"
              type="index"
              width="80"
              :index="indexMethod"
              align="center"
            >
            </el-table-column>
            <el-table-column
              type="selection"
              width="55"
              align="center"
            >
            </el-table-column>
          </template>
        </lee-easy-table>

进阶用法（四）,使用插槽，而不必罗列所有列，比如上面的表格，我想要增加一列操作按钮：使用自定义拼接 column 数据和获取自定义插槽

vue

<template>
        <lee-easy-table
          :options="options"
        >
          <template #control="{ scope}">
              <el-button @click="deleteItem(scope)">删除</el-button>
          </template>
        </lee-easy-table>
</template>
<script>
export default{
    //...
    data(){
        default(){
        return {
            options:{
                data:[],
                columns:[]
            }
        }
    }
    },
    mounted(){
        this.$nextTick(()=>{
            this.init();
        })
    },
    methods:{
        init(){
            this.columns.push({
                 prop: "control",
                 label: "操作",
                 "show-overflow-tooltip": true,
                 align: "center",
            })
        },
        // 删除行数据
        deleteItem(scope){
            //可以对scope进行结构赋值 let {row, column, $index, store} = scope;
            //或者直接写成  deleteItem({row, column, $index, store}){}
            // 业务逻辑 .....
        }
    }
    
}
</script>

参数释义

参数	备选值/类型	释义
options	object	【必须】表格组件的配置项 data为原生组件data数据 columns为数据化的列配置

9.参数与事件基本el-table的用法均可以支持

10.注意：ref获取的实例为本组件实例，需要获取el-table实例，可以使用this.$refs.组件ref.$children[0]来获取

lee-easy-table ​

安装 ​

lee-easy-table

安装