vue+element-ui 테이블 캡슐화 태그는 슬롯 슬롯 태그를 사용합니다.-프런트엔드 Q&A-php.cn

vue+element-ui 테이블 캡슐화 태그는 슬롯 슬롯 태그를 사용합니다.

hzc

풀어 주다： 2020-06-17 10:16:54

앞으로

7772명이 탐색했습니다.

우리는 많은 시스템에서 일부 속성을 표시하기 위해 양식에 다양한 태그를 추가해야 한다는 것을 알고 있습니다. element-ui에 태그를 추가하는 것은 매우 간단합니다. 가장 중요한 것은 vue의 슬롯 기능을 사용하는 것입니다. 먼저 슬롯이 무엇인지 이해하십시오.

Slot

슬롯의 의미는 단순히 상위 구성 요소가 이 하위 구성 요소를 사용할 때 자리 표시자의 모양을 사용자 정의할 수 있다는 것입니다. 제목, 버튼, 심지어 표나 양식까지 말이죠.

슬롯은 왜 필요한가요? 컴포넌트를 추출한 이유는 재사용 가능한 코드가 너무 많기 때문입니다. 재사용 가능한 컴포넌트를 사용하면 복사 및 붙여넣기가 크게 줄어듭니다. 두 개의 구성요소가 있다고 상상해 보세요. 한 부분을 제외하고 대부분은 동일합니다. 이때 이 부분에 대해 다른 부분을 반복할 필요가 없습니다. 슬롯이 있으면 두 구성 요소의 공통 부분을 추출한 다음 나중에 호출할 때 이 부분에 대한 코드만 작성할 수 있습니다. 이는 우리의 구성 요소화 사고와 일치하며 많은 작업을 절약합니다.

element-table은 행 정보를 가져옵니다

In에서 slot-scope를 사용하여 현재 행 정보를 가져옵니다slot-scope，可以获得当前行的信息

<template slot-scope="scope" ></template>

로그인 후 복사

scope.$index 获取索引
scope.row 获取当前行（object）

利用插槽

在表格数据中，对于要呈现标签的一个属性添加tag:true，当循环<el-table-column>的时候，遇到设置了tag的属性，就会进到这个插槽中，调用这个组件的父组件就可以自定义标签列要呈现的内容

在table组件中

<p class="table-content">
    <el-table
        :data="list"
        class="mt-10"
        fit
        stripe
        empty-text="暂无数据"
        :highlight-current-row="true"
    >
        <el-table-column
            v-for="(item, index) in table_title"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :width="item.width?item.width:null"
            :min-width="item.minwidth?item.minwidth:null"
            :sortable="item.sortable?item.sortable:false"
            :align="item.columnAlign"
            :header-align="item.titleAlign"
        >
            <template slot-scope="scope">
                <template v-if="item.tag">
                    <slot name="tags" :scope="scope.row"></slot>
                </template>
                <span v-else>{{scope.row[item.prop]}}</span>
            </template>
        </el-table-column>
    </el-table>
</p>

로그인 후 복사

怎么循环<el-table>

<table-page
    :list="listData"
    :table_title="table_title">
    <template v-slot:tags="scope">
        <el-tag
          v-if="scope.scope.tag == 1"
          size="small"
          type="primary"
          >tag1
        </el-tag>
        <el-tag
          v-else-if="scope.scope.tag == 2"
          size="small"
          type="warning"
          >tag2
        </el-tag>
        <el-tag
          v-else-if="scope.scope.tag == 3"
          size="small"
          type="success"
          >tag3
        </el-tag>
    </template>
</table-page>

로그인 후 복사

scope.$index code> 색인 가져오기
scope.row 현재 행(객체) 가져오기

테이블 데이터의 슬롯

을 사용하고 `<el-table-column>`을 반복할 때 속성에 `tag:true`를 추가하여 레이블을 표시합니다. `태그`가 설정된 속성이 나타나면 이 슬롯에 들어가 이 구성 요소의 상위 구성 요소를 호출하여 태그 열에 표시할 콘텐츠를 사용자 정의합니다

테이블 컴포넌트에서

[
  {
    prop: 'id',
    label: '编号',
    width: '100',
    titleAlign: 'center',
    columnAlign: 'center',
    sortable:true
  },
  {
    prop: 'date',
    label: '日期',
    width: '150',
    titleAlign: 'center',
    columnAlign: 'center',
    sortable:true
  },
  {
    prop: 'name',
    label: '姓名',
    width: '120',
    titleAlign: 'center',
    columnAlign: 'center',
    sortable:true
  },
  {
    prop: 'province',
    label: '省份',
    minwidth: '120',
    titleAlign: 'center',
    columnAlign: 'center',
    sortable:true,
    isEdit: true
  },
  {
    prop: 'city',
    label: '市区',
    minwidth: '120',
    titleAlign: 'center',
    columnAlign: 'center',
    sortable:true
  },
  {
    prop: 'address',
    label: '地址',
    minwidth: '300',
    titleAlign: 'center',
    columnAlign: 'center',
    sortable:true
  },
  {
    prop: 'auditflag',
    label: '状态',
    minwidth: '80px',
    tag: true,
    titleAlign: 'center',
    columnAlign: 'center',
    sortable:true
  },
];

로그인 후 복사

<el-table>의 내용과 제목을 반복하는 방법은 위의 코드와 같습니다

참조하는 상위 컴포넌트에서 테이블 컴포넌트

 [
    {
        id: 1,
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333,
        tag: "1"
    }, {
        id: 2,
        date: '2016-05-04',
        name: '王小',
        province: '北京',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1517 弄',
        zip: 200333,
        tag: "2"
    }, {
        id: 3,
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1519 弄',
        zip: 200333,
        tag: "3"
    }, {
        id: 4,
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333,
        tag: "1"
    }, {
        id: 5,
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333,
        tag: "2"
    }, {
        id: 6,
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333,
        tag: "3"
    }, {
        id: 7,
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333,
        tag: "1"
    }, {
        id: 8,
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333,
        tag: "2"
    }, {
        id: 9,
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333,
        tag: "3"
    }, {
        id: 10,
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333,
        tag: "1"
    }
],复制代码

로그인 후 복사

테이블에 사용된 데이터

table_title