Comparta un escenario de uso de ranuras vue-slot

exigir reaparición

 <el-table-column align="center" label="状态" prop="mitStatus" show-overflow-tooltip />

Aquí quiero hacer un juicio trinocular sobre el estado. Si es 0, está en progreso, de lo contrario está completo. Al comienzo del período, escribí así

 <el-table-column align="center" label="状态" prop="mitStatus==0?'进行中':'已完成'" show-overflow-tooltip />

<el-table-column>Parece correcto, pero la función no está implementada. La razón es que cuando se usa para representar columnas de tabla en Vue , puede usar propel atributo para especificar los campos de datos que se mostrarán. Por ejemplo, prop="mitStatus"indica que la columna debe mostrar mitStatusel valor del campo. Sin embargo, propno puede escribir expresiones JavaScript directamente porque solo se usa para especificar los nombres de los campos de datos.

Si desea representar el contenido de la celda según condiciones específicas, debe usar scoped-slotVue, que es una característica del componente de tabla de Vue que le permite usar una plantilla personalizada para representar el contenido de la celda. En el caso anterior, desea mitStatusmostrar texto diferente según el valor de, por lo que debe utilizar scoped-slotpara manejar esta lógica.

problema resuelto

Por lo tanto, puede usarlo scoped-slotpara personalizar el contenido de las columnas de la tabla para que se pueda mostrar contenido diferente en función de diferentes valores de datos. En su código, el-table-columnmodifique lo siguiente:

<el-table-column align="center" label="状态" prop="mitStatus" show-overflow-tooltip>
  <template slot-scope="scope">
    {
   
   { scope.row.mitStatus === 0 ? '进行中' : '已完成' }}
  </template>
</el-table-column>

En el código anterior, significa que el objeto se puede utilizar para acceder a los datos de la fila actual slot-scope="scope"en esta ranura . Obtenga el valor de cada fila scopey luego muestre el contenido correspondiente en función de diferentes valores. Si es 0, se muestra "En curso", de lo contrario se muestra "Completado".scope.row.mitStatusmitStatusmitStatus

expansión del conocimiento

Al utilizar componentes Element UI en Vue.js <el-table>, puede personalizar el contenido de las columnas de la tabla a través de ranuras. Las ranuras son una característica de Vue.js que le permite incrustar contenido o plantillas adicionales dentro de los componentes, y estas ranuras se pueden usar en el componente para representar contenido. En <el-table>, puede utilizar ranuras para personalizar cómo se muestra cada columna.

A continuación se muestra un ejemplo sencillo de cómo utilizar la sintaxis de ranuras para personalizar el contenido de las columnas de la tabla:

<template>
  <el-table :data="tableData">
    <el-table-column label="姓名" prop="name"></el-table-column>
    <el-table-column label="状态">
      <!-- 自定义插槽，通过 slot-scope 获取当前行数据 -->
      <template slot-scope="scope">
        <!-- 根据状态值动态显示不同文本 -->
        {
   
   { scope.row.status === 0 ? '进行中' : '已完成' }}
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
      
      
  data() {
      
      
    return {
      
      
      tableData: [
        {
      
       name: 'Alice', status: 0 },
        {
      
       name: 'Bob', status: 1 },
        {
      
       name: 'Charlie', status: 0 },
      ],
    };
  },
};
</script>

En el ejemplo anterior:

1. Dentro <el-table>del componente, usamos dos <el-table-column>, uno para mostrar el nombre y otro para la columna de estado.

2. En el segundo <el-table-column>, se utiliza un elemento <template>para crear la ranura. slot-scope="scope"Indica que la ranura actual puede acceder a los datos de la fila actual, aquí scope.row.

3. En el contenido del espacio, utilizamos la sintaxis de interpolación de plantilla { { }}para mostrar texto diferente según el valor de estado de la fila actual.

Esta forma de utilizar las ranuras le permite personalizar de forma flexible el contenido de las columnas de la tabla según las necesidades comerciales reales. ¡Muestre texto dinámicamente, agregue estilos personalizados o agregue otros elementos HTML! Por supuesto, hay tres tipos de espacios: espacios personalizados, espacios con alcance y espacios con nombre. ¡Puedes aprender más sobre ellos tú mismo! ! !