download element ui tree table - download do código-fonte element ui tree table

element ui tree table

Outras categorias

1.0

Baixar

elemento-ui-árvore-tabela

Estenda o componente da tabela ElementUI para oferecer suporte à estrutura em árvore

Instalar

npm install element-ui-tree-table -S

Uso

O projeto depende do Element-UI, você precisa apresentá-lo primeiro

introduzir

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

usar

dados de teste

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

Itens de configuração

propriedade	tipo	ilustrar	valor padrão
dados	Variedade	Fonte de dados, requer que um atributo rowKey seja especificado por padrão para identificar exclusivamente a linha	-
chave de identificação	Corda	Índice exclusivo da fonte de dados	rowKey
colunas	Variedade	Configure colunas de índice, selecione colunas e expanda colunas	-
ícone	Corda	expandir ícone	el-icon-caret-right
classe de gatilho	Corda	Expandir classe de botão	-
reserva expandida	Booleano	Se deve manter o estado expandido É recomendado não definir a expansão padrão quando esta propriedade for verdadeira. A retenção do estado expandido pode ser obtida ouvindo os gatilhos.	-
Itens de configuração da tabela original	-	Consulte a documentação do element-ui	-

item de configuração de colunas

Perceber:

O primeiro elemento cujo tipo não seja índice e seleção será tratado como um botão de expansão para posicionar a coluna.
Só pode haver uma coluna expandida e quaisquer colunas extras serão ignoradas.

Expandir configuração de coluna

propriedade	tipo	ilustrar	Valor opcional
rótulo	Corda	Título exibido	-
adereço	Corda	O nome do campo correspondente ao conteúdo da coluna, você também pode usar o atributo de propriedade	-
alinhar	Corda	Alinhamento	esquerda/centro/direita
largura	Corda	Largura da coluna correspondente	-
fixo	String, Booleano	Quer a coluna esteja fixada à esquerda ou à direita, verdadeiro significa fixada à esquerda
cabeçalho de renderização	Função(h, {coluna, $index })	Função usada para renderização da área do rótulo do título da coluna
nome da classe	Corda	Coluna className
rótulo-nome da classe	Corda	Nome de classe personalizado para o cabeçalho da coluna atual
mostrar-overflow-tooltip	Booleano	Mostrar dica quando o conteúdo é muito longo e está oculto
largura mínima	Corda	A largura mínima da coluna correspondente A diferença da largura é que a largura é fixa e a largura mínima alocará proporcionalmente a largura restante para a coluna para a qual a largura mínima está definida.
alinhamento de cabeçalho	Corda	Alinhamento do cabeçalho Se este item não estiver definido, será utilizado o alinhamento da tabela.	esquerda/centro/direita
redimensionável	Booleano	Se a largura da coluna correspondente pode ser alterada arrastando (o atributo border precisa ser definido como verdadeiro)

Configuração normal da coluna

propriedade	tipo	ilustrar	Valor opcional
tipo	Corda	Tipo de coluna correspondente, se a seleção for definida, a caixa de seleção múltipla será exibida; se o índice for definido, o índice da linha será exibido;	seleção/índice
rótulo	Corda	Título exibido	-
adereço	Corda	O nome do campo correspondente ao conteúdo da coluna, você também pode usar o atributo de propriedade	-
alinhar	Corda	Alinhamento	esquerda/centro/direita
largura	Corda	Largura da coluna correspondente	-
fixo	String, Booleano	Quer a coluna esteja fixada à esquerda ou à direita, verdadeiro significa fixada à esquerda
cabeçalho de renderização	Função(h, {coluna, $index })	Função usada para renderização da área do rótulo do título da coluna
nome da classe	Corda	Coluna className
rótulo-nome da classe	Corda	Nome de classe personalizado para o cabeçalho da coluna atual
selecionável	Função (linha, índice)	É válido apenas para colunas com type=selection O tipo é Function. O valor de retorno de Function é usado para determinar se o CheckBox desta linha pode ser verificado.
mostrar-overflow-tooltip	Booleano	Mostrar dica quando o conteúdo é muito longo e está oculto
largura mínima	Corda	A largura mínima da coluna correspondente A diferença da largura é que a largura é fixa e a largura mínima alocará proporcionalmente a largura restante para a coluna para a qual a largura mínima está definida.
alinhamento de cabeçalho	Corda	Alinhamento do cabeçalho Se este item não estiver definido, será utilizado o alinhamento da tabela.	esquerda/centro/direita
redimensionável	Booleano	Se a largura da coluna correspondente pode ser alterada arrastando (o atributo border precisa ser definido como verdadeiro)