常用标签语法

1.1.1 提示信息tooltip，换行

<el-table-column align="center" label="电话" prop="mobile" width="130">
    <template #default="{ row }">
        <el-tooltip placement="top">
            <div slot="content">{{ row.tel1 }}<br/>{{ row.tel2 }}</div>
            <span>{{ row.mobile }}</span>
        </el-tooltip>
    </template>
</el-table-column>  
<el-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="left-end">
    <!-- 里面必须要有一个标签，否则不显示 -->
    <el-button>左下</el-button>
</el-tooltip>

注意事项：内容插槽content

1.1.2 确认气泡el-popconfirm

    <el-table-column align="center" label="操作" width="110">
        <template #default="{ row }">
          <el-button-group>
            <el-button
              icon="el-icon-edit"
              size="mini"
              type="primary"
              @click="clickEdit(row)"
            />
            <el-popconfirm title="确定删除吗？" @confirm="clickDelete(row)"
              <el-button
                slot="reference"
                icon="el-icon-delete"
                size="mini"
                type="danger"
              />
            </el-popconfirm>
            <el-popconfirm title="确定删除吗？" @confirm="clickDelete(row)"
              <template #reference>
                <el-button
                  icon="el-icon-delete"
                  size="mini"
                  type="danger"
                />
              </template>
            </el-popconfirm>
          </el-button-group>
        </template>
      </el-table-column>

注意事项：需要插槽reference，否则不显示

1.1.3 表格展开详情单元格写法el-table-column type="expand"

        <el-table-column type="expand">
          <template #default="{ row }">
            <el-form class="demo-table-expand" inline label-position="left">
              <el-form-item label="商品名称">
                <span>{{ row.name }}</span>
              </el-form-item>
              <el-form-item label="所属店铺">
                <span>{{ row.shop }}</span>
              </el-form-item>
              <el-form-item label="商品 ID">
                <span>{{ row.id }}</span>
              </el-form-item>
              <el-form-item label="店铺 ID">
                <span>{{ row.shopId }}</span>
              </el-form-item>
              <el-form-item label="商品分类">
                <span>{{ row.category }}</span>
              </el-form-item>
              <el-form-item label="店铺地址">
                <span>{{ row.address }}</span>
              </el-form-item>
              <el-form-item label="商品描述">
                <span>{{ row.desc }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>