element ui tree table下載 - element ui tree table原始碼下載

element ui tree table

其他類別

1.0

下載

element-ui-tree-table

擴展ElementUI表格元件，支援樹狀結構

安裝

npm install element-ui-tree-table -S

使用方式

專案依賴Element-UI，您需要先進行引入

引入

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

使用

測試數據

< 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 >

配置項

屬性	類型	說明	預設值
data	Array	資料來源, 要求預設指定一個rowKey屬性，唯一標識該行	-
id-key	String	資料來源唯一索引	rowKey
columns	Array	配置索引列，選擇列和展開列	-
icon	String	展開圖示	el-icon-caret-right
trigger-class	String	展開按鈕類別	-
reserve-expaned	Boolean	是否保留展開狀態，建議此屬性為true時不要設定預設展開，保留展開狀態可以透過監聽trigger實現	-
原表格配置項	-	參考element-ui文檔	-

columns配置項

注意：

第一個type不為index和selection的元素將被視為展開按鈕放置列
只能有一個展開列，多餘的會忽略

展開列配置

屬性	類型	說明	可選值
label	String	顯示的標題	-
prop	String	對應列內容的欄位名，也可以使用property 屬性	-
align	String	對齊方式	left/center/right
width	String	對應列的寬度	-
fixed	String, Boolean	列是否固定在左側或右側，true 表示固定在左側
render-header	Function(h, { column, $index })	列標題Label 區域渲染使用的Function
class-name	String	列的className
label-class-name	String	目前列標題的自訂類別名
show-overflow-tooltip	Boolean	當內容過長被隱藏時顯示tooltip
min-width	String	對應列的最小寬度，與width 的差異是width 是固定的，min-width 會把剩餘寬度按比例分配給設定了min-width 的列
header-align	String	表頭對齊方式，若不設定該項，則使用表格的對齊方式	left/center/right
resizable	Boolean	對應列是否可以透過拖曳來改變寬度（需要設定border 屬性為真）

普通列配置

屬性	類型	說明	可選值
type	String	對應列的類型，如果設定了selection 則顯示多重選取框；如果設定了index 則顯示該行的索引	selection/index
label	String	顯示的標題	-
prop	String	對應列內容的欄位名，也可以使用property 屬性	-
align	String	對齊方式	left/center/right
width	String	對應列的寬度	-
fixed	String, Boolean	列是否固定在左側或右側，true 表示固定在左側
render-header	Function(h, { column, $index })	列標題Label 區域渲染使用的Function
class-name	String	列的className
label-class-name	String	目前列標題的自訂類別名
selectable	Function(row, index)	僅對type=selection 的列有效，類型為Function，Function 的回傳值用來決定這一行的CheckBox 是否可以勾選
show-overflow-tooltip	Boolean	當內容過長被隱藏時顯示tooltip
min-width	String	對應列的最小寬度，與width 的差異是width 是固定的，min-width 會把剩餘寬度按比例分配給設定了min-width 的列
header-align	String	表頭對齊方式，若不設定該項，則使用表格的對齊方式	left/center/right
resizable	Boolean	對應列是否可以透過拖曳來改變寬度（需要設定border 屬性為真）