AHRDXF_ELEMENT/FAQ.md

常见问题

给组件绑定的事件为什么无法触发？

在 Vue 2.0 中，为自定义组件绑定原生事件必须使用 .native 修饰符：

  <my-component @click.native="handleClick">Click Me</my-component>

从易用性的角度出发，我们对 Button 组件进行了处理，使它可以监听 click 事件：

  <el-button @click="handleButtonClick">Click Me</el-button>

但是对于其他组件，还是需要添加 .native 修饰符。

如何在 Table 组件的每一行添加操作该行数据的按钮？

使用 Scoped slot 即可：

  <el-table-column label="操作">
    <template slot-scope="props">
      <el-button @click.native="showDetail(props.row)">查看详情</el-button>
    </template>
  </el-table-column>

参数 row 即为对应行的数据。

Tree 组件的 render-content 和 Table 组件的 render-header 怎么用？

请阅读 Vue 文档 Render Function 的相关内容。注意，使用 JSX 来写 Render Function 的话，需要安装 babel-plugin-transform-vue-jsx，并参照其文档进行配置。

所有组件的任意属性都支持 .sync 修饰符吗？

不是。对于支持 .sync 修饰符的属性，我们会在文档的 API 表格中注明。更多 .sync 的用法请查看 Vue 文档。

你们的文档怎么偷偷更新了？

我们只会在 Element 发布新版本时同步更新文档，以体现最新的变化。详细的更新内容可以查看 changelog。

在项目中引入 Element，但是 CSS 报错/字体文件报错/组件没有样式是什么原因？

请参考我们提供的 starter kit，在 webpack 的 loaders 中正确配置 file-loader、css-loader 和 style-loader。此外，我们还提供了基于 cooking 和 laravel 的项目模板。

将 Element 克隆至本地，运行时为何会报错/跑不起来？

首先，确保克隆的是 master 分支的最新代码，并且文件完整。其次，确保本地的 node 版本在 4.0 以上，npm 版本在 3.0 以上。最后，可以启动开发环境：

  npm run dev

或是直接打包：

  npm run dist

FAQ

Why are my event listeners not working?

In Vue 2.0, adding native event handlers in custom components requires a .native modifier:

  <my-component @click.native="handleClick">Click Me</my-component>

For the sake of usability, we processed Button so it can listen to click events:

  <el-button @click="handleButtonClick">Click Me</el-button>

For other components, the .native modifier is still mandatory.

How do I add buttons in each row of Table to operate data of that row?

Just use Scoped slot:

  <el-table-column label="Operations">
    <template slot-scope="props">
      <el-button @click.native="showDetail(props.row)">Details</el-button>
    </template>
  </el-table-column>

The parameter row is the data object of corresponding row.

How do render-content of Tree and render-header of Table work?

Please refer to Render Function in Vue's documentation. In addition, if you are writing render functions with JSX, babel-plugin-transform-vue-jsx is required. See here for its configurations.

Can I use .sync modifier on every attribute?

No, only a few attributes supports the .sync modifier, and we have explicitly marked them on the documentation's API table. For more information about .sync, please refer to Vue documentation.

When do you update documentations of Element?

We update documentations only when a new version of Element is published so that it reflects all the changes introduced in that version. Updated changed can be found in the changelog。

I imported Element in my project, but why does it report CSS error/font file error/components have no style?

Please refer to our starter kit and correctly configure file-loader, css-loader and style-loader in webpack config file. Besides, we also provide templated based on cooking and laravel.

I cloned Element's repo, but failed to run it. How do I solve it?

First, please make sure to clone the latest code in master branch and cloned files are intact. Then, note that the version of Nodejs should be 4.0+ and npm 3.0+. Finally, activate development:

  npm run dev

or build it:

  npm run dist

Preguntas más frecuentes

¿Porque mis receptores de eventos no funcionan?

En Vue 2.0, agregando nativos receptores de evento a medida componentes requiere el modificador .native:

  html
  <mi-componente @click.native="handleClick">Haga Clic Aquí</mi-componente>

Para conveniencia, hemos ya procesado eventos para el componente Button para que el interfaz sea consistente con clic eventos de otros componentes:

  <el-button @click="handleButtonClick">Haga Clic Aquí</el-button>

Para otros componentes el uso del modificador .native sigue siendo obligatorio.

¿Como agrego botones en cada linea de una tabla para que operen en los datos de esa linea?

Simplemente agregue “Scoped slot”:

  <el-table-column label="Operaciones">
    <template slot-scope="props">
      <el-button @click.native="verDetalles(props.row)">Detalles</el-button>
    </template>
  </el-table-column>

El parámetro row contiene los datos de la linea correspondiente de la tabla.

¿Como funcionan render-content de Tree y render-header de Table?

Por favor refiérase a Función de representación en la documentación de Vue. Adicionalmente, sí usted está escribiendo funciones de representar con JSX, se requiere el componente babel-plugin-transform-vue-jsx. Más información aquí para su uso y configuración.

¿Puedo usar el modificador .sync con cada atributo?

No, solamente un grupo pequeño de atributos apoyan el modificador .sync, y están anotados claramente en la documentación del IPA. Para información adicional sobre .sync, por favor refiérase a documentación de Vue.

¿Cuando añaden a la documentación de Element?

Añadamos la documentación con cada versión nueva de Element y los cambios reflejan los cambios del software de esa versión. Los cambios actuales y históricos se encuentran aquí.

¿Importé Element a mi proyecto pero tengo errores con CSS y/o fuentes y mis componentes no tienen ningún estilo?

Refiérase a nuestro ‘kit’ de inicio y configure correctamente file-loader, css-loader y style-loader en el archivo webpack config. Además, proveemos un ejemplar para cooking y para laravel.

Hice un clon del repositorio de Element pero no arranca. ¿Como lo resuelvo?

Primero, pro favor, asegúrese de usar la versión más corriente en la rama master y que los archivos están en orden. Después, revise sí la versión de Nodejs es 4.0+ y npm debe ser 3.0+. Finalmente active el modo desarrollo:

  npm run dev

O arme su aplicación así:

  npm run dist