vue jsx table

文件

文檔示例

此組件基於element-table二次開發，以實際業務出發，封裝了常用的功能，通過配置的方式生成表格， 並且實現多級表頭expand展開項自定義表頭功能等

使用

使用之前需要項目中引入element-ui

 npm i vue - jsx - table

import 'vue-jsx-table/dist/vue-jsx-table.css'
import vueJsxTable from 'vue-jsx-table'

Vue . use ( vueJsxTable )

cdn方式

  <!-- 引入样式 -->
    < link
      rel = "stylesheet"
      href = "https://unpkg.com/vue-jsx-table/dist/vue-jsx-table.css"
    />
    < ! -- 引入组件库 -- >
    < script src = "https://unpkg.com/vue-jsx-table/dist/vue-jsx-table.umd.min.js" > </ script > 

普通表格

對於表格配置columns、tableData選項是必須的。

 < vue-jsx-table
        : columns = "columns"
        : tableData = "tableData"
        border
        @ selection - change = "selectionChange"
        : total = "100"
      >
 < / vue-jsx-table >
  data() {
    return {
      columns : [
        {
          type : 'selection' ,
          fixed : 'left' ,
          selectable : this . rowSelectableHandle ,
        } ,
        {
          label : '年龄' ,
          prop : 'age' ,
          width : 300 ,
          sortable : true ,
        } ,
    
        {
          label : '学校' ,
          prop : 'school' ,
          width : 200 ,
        } ,
        {
          label : '学费' ,
          prop : 'fee' ,
          width : 200 ,
        } ,

        {
          label : '编辑' ,
          prop : 'edit' ,
          slot : 'edit' ,
          fixed : 'right' ,
          width : 200 ,
        } ,
      ] ,
      tableData : [ ]
    } ;
  } ,

多級表頭

給column 設置children，可以渲染出分組表頭。

   {
          label : '多级表头' ,
          children : [
            {
              label : '年级' ,
              prop : 'grade' ,
              width : 120 ,
            } ,
            {
              label : '班级' ,
              prop : 'class' ,
            } ,
          ] ,
        } , 

自定義渲染內容render

給column設置render選項，Funtion(row, column, $index)

     {
          label : 'render' ,
          prop : 'render' ,
          width : 200 ,
          render : ( row , column , $index ) => {
            return (
              < div onClick = { ( ) => this . cellClick ( row , column , $index ) } >
                测试render
              </ div >
            ) ;
          } ,
        } , 

設置展開項

只需要對column配置項設置type:expand，展開的內容可以使用插槽slot，也可以使用render，如果同時配置slot,render,則slot會被忽略。

 {
          type : 'expand' ,
          slot : 'expand' ,
        } , 

自定義插槽

只需要對column配置項設置solt:''，slot為插槽的名字

  {
          label : '编辑' ,
          prop : 'edit' ,
          slot : 'edit' ,
          fixed : 'right' ,
          width : 200 ,
        } , 

自定義表頭

只需要對column配置項設置renderHeader， renderHeader為element-ui的原生配置（官方不推薦使用column上的render-header函數，推薦使用插槽！！，控制台會有提示，，囧），你也可以使通過配置slotHeader項使用插槽，注意插槽名稱不能重複，定義了插槽配置已定義在模板中聲明

renderHeader

   {
          label : '自定义表头' ,
          prop : 'name' ,
          width : 120 ,
          sortable : true ,
          renderHeader : ( column , scope ) => {
            console . log ( 'scope' , scope ) ;
            return < span class = "cell-header-red-star" > { column . label } </ span > ;
          } ,
        } ,

表頭插槽slotHeader

       {
          label : '姓名' ,
          prop : 'name' ,
          slotHeader : 'slotHeader' ,
        } ,

         <!-- 插槽表头 -->
        < template v-slot : slotHeader = "{ column }" >
          <!-- {{ scope.column.label }} -->
          < span >插槽表头： { { column . label } } </ span >
        </ template > 

分頁控件pageSize 改變、currentPage 改變，都會觸發page-change，Function({currentPage,pageSize})

  < vue-jsx-table
        @ page-change = "pageChangeHandle"
        : currentPage . sync = "paginationParams.pageNo"
        : total = "100"
      >
  </ vue-jsx-table >    
pageChangeHandle ( val ) {
      this . paginationParams . pageNo = val . currentPage ;
      this . paginationParams . pageSize = val . pageSize ;
    } , 

表格列內容為組件

通過solt插槽，也可以使用render函數來渲染組件

  < template v-slot : edit = "{ row }" >
          < el-input v-model = "row.name" > </ el-input >
        </ template >

Table Attributes

所有的Table Attributes通過v-bind="$attrs"實現，額外增加的Table Attributes：

參數	說明	類型	預設值
columns	表格的列	Array	[]
columnsKeyName	column 的key，如果需要使用filter-change 事件，則需要此屬性標識是哪個column 的篩選條件(Table-column Attributes的column-key)	string	-
align	對齊方式	String	left
showPagination	是否展示分頁控件	Boolean	true
currentPage	當前分頁控件的當前頁	Number	1
pageSizes	分頁控件的pageSizes	Array	[10, 20, 30, 50]
pageSize	分頁控件的pageSize	Array	[]
layout	分頁控件的layout	String	'sizes, prev, pager, next,total'
total	分頁控件的total	Number	0
paginationStyle	分頁控件的樣式style	Object	-
showOverflowTooltip	當內容過長被隱藏時顯示tooltip，如果column沒單獨配置showOverflowTooltip，則使用該屬性，默認為true	Boolean	true
showTableSetting	展示表格設置	Boolean	false
hideColumns	需要隱藏的列，label名稱，有些場景需要根據部分條件展示隱藏列	Array	[]
customClass	自定義樣式class	Array	['vue-jsx-table-wrapper']

Table Events

所有的Table Events 通過v-on="$listeners"實現，額外增加的Table Events：

參數	說明	類型	預設值
size-change	page-change，current-change改變都會觸發此事件，為了方便分頁改變而增加	Function	'function({pageSize: 10,currentPage: 1,}) {}'
size-change	pageSize 改變時會觸發	-	-
current-change	currentPage 改變時會觸發	-	-

配置列columns

參數	說明	類型	預設值
prop	對應列內容的字段名	string	-
slot	列的插槽名字(注意如果嵌套表格，slot名稱不能有重複的，插槽作用域（{ row, $index }）)	string	-
label	顯示的標題	string	-
width	對應列的寬度	Number	-
showOverflowTooltip	當內容過長被隱藏時顯示tooltip	Boolean	-
fixed	列是否固定在左側或者右側（true, left, right），true 表示固定在左側	string, boolean	-
render	jsx渲染函數	function	render(row, column, $index)
type	selection/index/expand	string	-
renderHeader	表頭，列標題Label 區域渲染使用的Function	Function(column, scope })，column為配置項，scope為原生組件的scope 。 （該屬性不是原生參數）	-
cellredstar	表頭文字前是否打紅星標誌	Boolean	false
sortable	對應列是否可以排序，如果設置為'custom'，則代表用戶希望遠程排序，需要監聽Table 的sort-change 事件	boolean, string （true, false, 'custom'）	false
formatter	用來格式化內容（element-ui原有屬性）	Function(row, column, cellValue, index)	-
selectable	僅對type=selection 的列有效，類型為Function，Function 的返回值用來決定這一行的CheckBox 是否可以勾選	Function(row, index)	-
showHeaderTooltip	鼠標移到表頭是否展示文案提示信息	Boolean	-
headerTooltipText	表頭展示文案信息內容	String	-