element ui tree table

要素-ui-ツリー-テーブル

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 >

設定項目

財産	タイプ	説明する	デフォルト値
データ	配列	データ ソース。行を一意に識別するには、デフォルトで rowKey 属性を指定する必要があります。	-
IDキー	弦	データソースの一意のインデックス	行キー
列	配列	インデックス列の構成、列の選択、列の展開	-
アイコン	弦	アイコンを展開する	el-アイコン-キャレット-右
トリガークラス	弦	展開ボタンクラス	-
リザーブ拡大	ブール値	展開状態を保持するかどうか。このプロパティが true の場合、展開状態の保持はトリガーをリッスンすることで実現できます。	-
元のテーブル構成項目	-	element-ui のドキュメントを参照してください。	-

列構成項目

知らせ：

• タイプがインデックスと選択ではない最初の要素は、列を配置するための展開ボタンとして扱われます。
• 展開された列は 1 つだけであり、余分な列は無視されます。

列構成を展開する

財産	タイプ	説明する	オプションの値
ラベル	弦	表示タイトル	-
小道具	弦	列の内容に対応するフィールド名。プロパティ属性も使用できます。	-
整列する	弦	位置合わせ	左/中央/右
幅	弦	対応する列幅	-
修理済み	文字列、ブール値	列が左に固定されているか右に固定されているかに関係なく、true は左に固定されることを意味します
レンダーヘッダー	関数(h, { 列, $index })	列タイトルのラベル領域のレンダリングに使用される関数
クラス名	弦	列クラス名
ラベルクラス名	弦	現在の列ヘッダーのカスタム クラス名
オーバーフローツールチップの表示	ブール値	コンテンツが長すぎて非表示になっている場合にツールチップを表示する
最小幅	弦	対応する列の最小幅です。 width との違いは、幅が固定されており、min-width は min-width が設定されている列に残りの幅を比例的に割り当てることです。
ヘッダー整列	弦	この項目が設定されていない場合は、テーブルの配置が使用されます。	左/中央/右
サイズ変更可能	ブール値	対応する列の幅をドラッグによって変更できるかどうか (border 属性を true に設定する必要があります)

通常のカラム構成

財産	タイプ	説明する	オプションの値
タイプ	弦	対応する列タイプ。選択が設定されている場合は複数選択ボックスが表示され、インデックスが設定されている場合は行のインデックスが表示されます。	選択/インデックス
ラベル	弦	表示タイトル	-
小道具	弦	列の内容に対応するフィールド名。プロパティ属性も使用できます。	-
整列する	弦	位置合わせ	左/中央/右
幅	弦	対応する列幅	-
修理済み	文字列、ブール値	列が左に固定されているか右に固定されているかに関係なく、true は左に固定されることを意味します
レンダーヘッダー	関数(h, { 列, $index })	列タイトルのラベル領域のレンダリングに使用される関数
クラス名	弦	列クラス名
ラベルクラス名	弦	現在の列ヘッダーのカスタム クラス名
選択可能	関数(行、インデックス)	type=selection の列にのみ有効です。タイプは Function です。Function の戻り値は、この行の CheckBox をチェックできるかどうかを決定するために使用されます。
オーバーフローツールチップの表示	ブール値	コンテンツが長すぎて非表示になっている場合にツールチップを表示する
最小幅	弦	対応する列の最小幅です。 width との違いは、幅が固定されており、min-width は min-width が設定されている列に残りの幅を比例的に割り当てることです。
ヘッダー整列	弦	この項目が設定されていない場合は、テーブルの配置が使用されます。	左/中央/右
サイズ変更可能	ブール値	対応する列の幅をドラッグによって変更できるかどうか (border 属性を true に設定する必要があります)

イベント

イベント名	効果	パラメータ
トリガー	展開された状態が変化するとトリガーされ、通常は状態を保存するために使用されます。	(データ データ ソース ノード、展開された状態)

方法

メソッド名	効果	パラメータ
すべて展開	すべて展開	-
すべて折りたたむ	すべて隠す	-

element-ui のドキュメントを参照してください。