element ui tree table Download - element ui tree table Source code download

element ui tree table

Other categories

1.0

Download

element-ui-tree-table

Extend ElementUI table component to support tree structure

Install

npm install element-ui-tree-table -S

Usage

The project depends on Element-UI, you need to introduce it first

introduce

 import TreeTableComponent from 'element-ui-tree-table'
import 'element-ui-tree-table/dist/index.css'
Vue . use ( TreeTableComponent , {
    prefix : 'i' // 可选
} )

use

test data

< template >
  < div id = " app " >
    < i-tree-table height = " 600px " id-key = " rowKey " :columns = " columns "
      @select = " onSelect "
      @trigger = " onTrigger "
      :data = " data " border >
      < el-table-column label = "负责人" prop = " leader " />
      < el-table-column label = "创建时间" prop = " createTime " />
      < el-table-column label = "经验要求" prop = " expr " >
        < template slot-scope="scope">
          < span v-if = " scope.row.expr " >{{scope.row.expr}}</ span >
          < span v-else >————</ span >
        </ template >
      </ el-table-column >
      < el-table-column label = "发布天数" prop = " date " />
    </ i-tree-table >
    < br />
    < el-button type = " primary " size = " small " @click = " add " >增加一行</ el-button >
  </ div >
</ template >

< script >
import data from ' ./components/data '
import TreeTable from ' ./components/tree-table '
export default {
  name : ' App ' ,
  components : {
    TreeTable
  },
  data () {
    return {
      data,
      columns : [{
        type : ' index ' ,
        align : ' center '
      }, {
        type : ' selection ' ,
        align : ' center '
      }, {
        label : '职位名称' ,
        prop : ' name '
      }],
      id : 1000
    }
  },
  methods : {
    add () {
      this . data . push ({
        rowKey : this . id ++ ,
        name : '新增行' ,
        leader : '管理员' ,
        $expanded : true ,
        createTime : ' 2019-07-24 ' ,
        expr : ' ' ,
        date : ' 1天'
      })
    },
    onSelect ( selection ) {
      console . log (selection)
    },
    onTrigger ( row , expanded ) {
      /**
       * 在这里可以保留折叠状态
       * 也可以设置reserve-expaned属性为true保留状态 但是你不能够设置默认值，设置了默认值的行将不受控，因为* 组件肯定是选择用户传入$expaned属性为准
       * 所以推荐的做法是监听trigger事件
       */
      row . $expanded = expanded
    }
  }
}
</ script >

Configuration items

property	type	illustrate	default value
data	Array	Data source, requires a rowKey attribute to be specified by default to uniquely identify the row	-
id-key	String	Data source unique index	rowKey
columns	Array	Configure index columns, select columns and expand columns	-
icon	String	expand icon	el-icon-caret-right
trigger-class	String	Expand button class	-
reserve-expaned	Boolean	Whether to retain the expanded state. It is recommended not to set the default expansion when this property is true. Retaining the expanded state can be achieved by listening to triggers.	-
Original table configuration items	-	Refer to element-ui documentation	-

columns configuration item

Notice:

The first element whose type is not index and selection will be treated as an expand button to place the column.
There can only be one expanded column, and any extra columns will be ignored.

Expand column configuration

property	type	illustrate	Optional value
label	String	Displayed title	-
prop	String	The field name corresponding to the column content, you can also use the property attribute	-
align	String	Alignment	left/center/right
width	String	Corresponding column width	-
fixed	String,Boolean	Whether the column is fixed to the left or right, true means fixed to the left
render-header	Function(h, { column, $index })	Function used for column title Label area rendering
class-name	String	Column className
label-class-name	String	Custom class name for the current column header
show-overflow-tooltip	Boolean	Show tooltip when content is too long and is hidden
min-width	String	The minimum width of the corresponding column. The difference from width is that width is fixed, and min-width will proportionally allocate the remaining width to the column for which min-width is set.
header-align	String	Header alignment. If this item is not set, the alignment of the table will be used.	left/center/right
resizable	Boolean	Whether the width of the corresponding column can be changed by dragging (the border attribute needs to be set to true)

Normal column configuration

property	type	illustrate	Optional value
type	String	Corresponding column type, if selection is set, the multi-select box will be displayed; if index is set, the index of the row will be displayed.	selection/index
label	String	Displayed title	-
prop	String	The field name corresponding to the column content, you can also use the property attribute	-
align	String	Alignment	left/center/right
width	String	Corresponding column width	-
fixed	String,Boolean	Whether the column is fixed to the left or right, true means fixed to the left
render-header	Function(h, { column, $index })	Function used for column title Label area rendering
class-name	String	Column className
label-class-name	String	Custom class name for the current column header
selectable	Function(row, index)	It is only valid for columns with type=selection. The type is Function. The return value of Function is used to determine whether the CheckBox of this row can be checked.
show-overflow-tooltip	Boolean	Show tooltip when content is too long and is hidden
min-width	String	The minimum width of the corresponding column. The difference from width is that width is fixed, and min-width will proportionally allocate the remaining width to the column for which min-width is set.
header-align	String	Header alignment. If this item is not set, the alignment of the table will be used.	left/center/right
resizable	Boolean	Whether the width of the corresponding column can be changed by dragging (the border attribute needs to be set to true)