element ui tree table

elemento-ui-árbol-tabla

Amplíe el componente de tabla ElementUI para admitir la estructura de árbol

Instalar

npm install element-ui-tree-table -S

Uso

El proyecto depende de Element-UI, primero debes presentarlo

introducir

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

usar

datos de prueba

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

Elementos de configuración

propiedad	tipo	ilustrar	valor predeterminado
datos	Formación	Fuente de datos, requiere que se especifique un atributo rowKey de forma predeterminada para identificar de forma única la fila	-
clave de identificación	Cadena	Índice único de fuente de datos	filaClave
columnas	Formación	Configurar columnas de índice, seleccionar columnas y expandir columnas	-
icono	Cadena	ampliar icono	el-icon-caret-derecha
clase de disparo	Cadena	Expandir clase de botón	-
reserva ampliada	Booleano	Si se debe conservar el estado expandido. Se recomienda no establecer la expansión predeterminada cuando esta propiedad es verdadera. Se puede retener el estado expandido escuchando los activadores.	-
Elementos de configuración de mesa originales.	-	Consulte la documentación de element-ui	-

elemento de configuración de columnas

Aviso:

• El primer elemento cuyo tipo no sea índice y selección será tratado como un botón de expansión para colocar la columna.
• Solo puede haber una columna expandida y se ignorarán las columnas adicionales.

Expandir configuración de columna

propiedad	tipo	ilustrar	Valor opcional
etiqueta	Cadena	Título mostrado	-
apuntalar	Cadena	El nombre del campo correspondiente al contenido de la columna, también puede usar el atributo de propiedad	-
alinear	Cadena	Alineación	izquierda/centro/derecha
ancho	Cadena	Ancho de columna correspondiente	-
fijado	Cadena, booleana	Ya sea que la columna esté fijada a la izquierda o a la derecha, verdadero significa fijada a la izquierda
encabezado de renderizado	Función(h, {columna, $índice })	Función utilizada para el título de la columna Representación del área de etiqueta
nombre de clase	Cadena	Nombre de clase de columna
nombre-clase-etiqueta	Cadena	Nombre de clase personalizado para el encabezado de la columna actual
mostrar información sobre herramientas de desbordamiento	Booleano	Mostrar información sobre herramientas cuando el contenido es demasiado largo y está oculto
ancho mínimo	Cadena	El ancho mínimo de la columna correspondiente. La diferencia con el ancho es que el ancho es fijo y el ancho mínimo asignará proporcionalmente el ancho restante a la columna para la cual se establece el ancho mínimo.
alineación de encabezado	Cadena	Alineación del encabezado. Si este elemento no está configurado, se utilizará la alineación de la tabla.	izquierda/centro/derecha
redimensionable	Booleano	Si el ancho de la columna correspondiente se puede cambiar arrastrando (el atributo de borde debe establecerse en verdadero)

Configuración de columna normal

propiedad	tipo	ilustrar	Valor opcional
tipo	Cadena	Tipo de columna correspondiente, si se establece la selección, se mostrará el cuadro de selección múltiple; si se establece el índice, se mostrará el índice de la fila.	selección/índice
etiqueta	Cadena	Título mostrado	-
apuntalar	Cadena	El nombre del campo correspondiente al contenido de la columna, también puede usar el atributo de propiedad	-
alinear	Cadena	Alineación	izquierda/centro/derecha
ancho	Cadena	Ancho de columna correspondiente	-
fijado	Cadena, booleana	Ya sea que la columna esté fijada a la izquierda o a la derecha, verdadero significa fijada a la izquierda
encabezado de renderizado	Función(h, {columna, $índice })	Función utilizada para el título de la columna Representación del área de etiqueta
nombre de clase	Cadena	Nombre de clase de columna
nombre-clase-etiqueta	Cadena	Nombre de clase personalizado para el encabezado de la columna actual
seleccionable	Función (fila, índice)	Solo es válido para columnas con tipo = selección. El tipo es Función. El valor de retorno de Función se utiliza para determinar si se puede marcar la casilla de verificación de esta fila.
mostrar información sobre herramientas de desbordamiento	Booleano	Mostrar información sobre herramientas cuando el contenido es demasiado largo y está oculto
ancho mínimo	Cadena	El ancho mínimo de la columna correspondiente. La diferencia con el ancho es que el ancho es fijo y el ancho mínimo asignará proporcionalmente el ancho restante a la columna para la cual se establece el ancho mínimo.
alineación de encabezado	Cadena	Alineación del encabezado. Si este elemento no está configurado, se utilizará la alineación de la tabla.	izquierda/centro/derecha
redimensionable	Booleano	Si el ancho de la columna correspondiente se puede cambiar arrastrando (el atributo de borde debe establecerse en verdadero)

evento

nombre del evento	efecto	parámetro
desencadenar	Se activa cuando cambia el estado expandido, generalmente se usa para guardar el estado	(nodo de fuente de datos, estado expandido)

método

nombre del método	efecto	parámetro
expandir todo	Expandir todo	-
colapsarTodos	ocultar todo	-

Consulte la documentación de element-ui