Share a vue-slot slot usage scenario

demand reappearance

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

Here, I want to make a trinocular judgment on the status. If it is 0, it is in progress, otherwise it is completed. At the beginning of the period, I wrote like this

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

<el-table-column>It seems correct, but the function is not implemented. The reason is that when using to render table columns in Vue , you can use propthe attribute to specify the data fields to be displayed. For example, prop="mitStatus"indicates that the column should display mitStatusthe value of the field. However, propyou cannot write JavaScript expressions directly in because it is only used to specify the data field names.

If you want to render cell content based on specific conditions, you need to use scoped-slotVue. This is a feature of the Vue table component that allows you to use a custom template to render content in the cell. In the above case, you want to mitStatusdisplay different text based on the value of , so you need to use scoped-slotto handle this logic.

problem solved

So you can use it scoped-slotto customize the content of table columns so that different content can be displayed based on different data values. In your code, el-table-columnmodify as follows:

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

In the above code, it means that the object can be used to access the data of the current row slot-scope="scope"in this slot . Get the value of each row scopethrough , and then display the corresponding content based on different values. If is 0, "In Progress" is displayed, otherwise "Completed" is displayed.scope.row.mitStatusmitStatusmitStatus

knowledge expansion

When using Element UI components in Vue.js <el-table>, you can customize the contents of table columns through slots. Slots are a feature of Vue.js that allows you to embed additional content or templates inside components, and these slots can be used in the component to render content. In <el-table>, you can use slots to customize how each column is displayed.

Here's a simple example of how to use slot syntax to customize table column content:

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

In the above example:

1. Within <el-table>the component, we use two <el-table-column>, one for displaying the name and one for the status column.

2. In the second one <el-table-column>, an element is used <template>to create the slot. slot-scope="scope"Indicates that the current slot can access the data of the current row, here scope.row.

3. In the slot content, we use template interpolation syntax { { }}to display different text based on the status value of the current row.

This way of using slots allows you to flexibly customize the contents of table columns according to actual business needs. Dynamically display text, add custom styles, or add other HTML elements! Of course, there are three types of slots: custom slots, scoped slots, and named slots. You can learn more about them yourself! ! !