vue-temp

-- 弹出框 --
<template>
  <el-dialog title="弹出框" :visible.sync="dialogVisible" center>
    <el-form ref="form" :model="form" label-width="80px" size="mini">
      <el-form-item label="姓名:"><el-input v-model="form.name" /></el-form-item>
      <el-form-item label="爱好:"><el-input v-model="form.hobi" /></el-form-item>
      <el-form-item label="地址:"><el-input v-model="form.address" /></el-form-item>
      <el-form-item :inline="true" align="right">
        <el-button type="primary" icon="el-icon-circle-check" @click="onSubmit">提交</el-button>
        <el-button type="success" icon="el-icon-refresh" @click="dialogVisible = false">取消 </el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

-- 弹出框 组件 计算属性 get|set --
<template>
  <el-dialog center :visible.sync="dialogVisible" title="弹出框">
    <el-form ref="form" :model="form" label-width="80px" size="mini">
      <el-form-item label="姓名:"><el-input v-model="form.name" /></el-form-item>
      <el-form-item label="爱好:"><el-input v-model="form.hobi" /></el-form-item>
      <el-form-item label="地址:"><el-input v-model="form.address" /></el-form-item>
      <el-form-item align="right">
        <el-button type="primary" icon="el-icon-circle-check" @click="onSubmit">提交</el-button>
        <el-button type="success" icon="el-icon-refresh" @click="onCancel">取消 </el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

-- 弹出框 组件 this.$parent.xxx--
<template>
  <el-dialog center :visible.sync="this.$parent.dialogVisible" :show-close="false" title="弹出框">
    <el-form ref="form" :model="form" label-width="80px" size="mini">
      <el-form-item label="姓名:"><el-input v-model="form.name" /></el-form-item>
      <el-form-item label="爱好:"><el-input v-model="form.hobi" /></el-form-item>
      <el-form-item label="地址:"><el-input v-model="form.address" /></el-form-item>
      <el-form-item align="right">
        <el-button type="primary" icon="el-icon-circle-check" @click="onSubmit">提交</el-button>
        <el-button type="success" icon="el-icon-refresh" @click="onCancel">取消 </el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

--  搜索栏 --
<template>
    <el-form :inline="true" :model="form" size="mini">
      <el-form-item label="姓名"><el-input v-model="form.name" /></el-form-item>
      <el-form-item label="爱好"><el-input v-model="form.hobi" /></el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="onSearch">搜索</el-button>
        <el-button type="info" icon="el-icon-refresh" @click="onReset">重置</el-button>
        <el-button type="success" icon="el-icon-circle-plus" @click="dialogVisible = true">新增</el-button>
      </el-form-item>
    </el-form>
</template>

-- 数据列表 -- 
<template>
  <el-table :data="tableData" border size="small" style="width: 100%">
    <el-table-column label="编号" align="center" width="100" type="index" />
    <el-table-column label="姓名" align="center" :show-overflow-tooltip="true" prop="name" width="100" />
    <el-table-column label="状态" align="center" :show-overflow-tooltip="true" prop="status" width="100" sortable />
    <el-table-column label="爱好" align="center" :show-overflow-tooltip="true" prop="hobi" width="100" />
    <el-table-column label="地址" align="left" :show-overflow-tooltip="true" prop="address" />
  </el-table>
</template>

-- 数据筛选 组件 -- 
<template>
  <el-form :inline="true" :model="form" size="mini">
    <el-form-item label="姓名"><el-input v-model="form.name" /></el-form-item>
    <el-form-item label="爱好"><el-input v-model="form.hobi" /></el-form-item>
    <el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="onSearch">搜索</el-button>
      <el-button type="info" icon="el-icon-refresh" @click="onReset">重置</el-button>
      <el-button type="success" icon="el-icon-circle-plus" @click="onAdd">新增</el-button>
    </el-form-item>
  </el-form>
</template>

-- 分页查询 --
<template>
  <el-pagination
    v-show="total>0"
    background
    :total="total"
    :current-page="currPage"
    :page-sizes="[5, 10, 15, 20, 25]"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    @size-change="sizeChange"
    @current-change="currentChange"
  />
</template>

-- 扩展 组件 --
<template>
  <el-table-column type="expand">
    <!-- props 仅仅是一个变量名、不是特殊命名 -->
    <template v-slot="props">
      <el-form label-position="left" inline class="demo-table-expand">
        <el-form-item>
          <el-form-item label="姓名">
            <span>{{ props.row.name }}</span>
          </el-form-item>
          <el-form-item label="爱好">
            <span>{{ props.row.hobi }}</span>
          </el-form-item>
          <el-form-item label="地址">
            <span>{{ props.row.address }}</span>
          </el-form-item>
        </el-form-item>
      </el-form>
    </template>
  </el-table-column>
</template>

-- 悬停 组件 --
<template slot-scope="scope">
  <el-table-column label="姓名" align="center" width="100">
    <template slot-scope="props">
      <el-popover trigger="hover" placement="top">
        <p>姓名: {{ props.row.name }}</p>
        <p>爱好: {{ props.row.hobi }}</p>
        <p>地址: {{ props.row.address }}</p>
        <div slot="reference" class="name-wrapper">
          <el-tag size="medium">{{ props.row.name }}</el-tag>
        </div>
      </el-popover>
    </template>
  </el-table-column>
</template>

-- 状态过滤 组件 --
<template>
  <el-table-column
    label="状态"
    align="center"
    width="100"
    prop="status"
    :filters=" [{ id: 0, value: '0', text: '休息中' }, { id: 1, value: '1', text: '工作中' }, { id: 2, value: '2', text: '学习中' }]"
    :filter-method="statusFilter"
  />
</template>
<script>
export default {
  methods: {
    // 状态过滤筛选
    statusFilter(value, row) {
      return row.status === Number(value)
    }
  }
}
</script>

-- 状态星星 组件 --
<template >
  <el-table-column label="状态" align="center" width="180" prop="level" sortable>
    <template v-slot="{row}">
      <el-rate :value="parseInt(row.status)" :max="6">
        {{ row.status }}
      </el-rate>
    </template>
  </el-table-column>
</template>

      <el-form-item>
        <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
          <el-tab-pane label="Param" name="1">
            <el-input v-model="form.params" type="textarea" rows="10" resize="both" />
          </el-tab-pane>
          <el-tab-pane label="Content" name="2">
            <el-input v-model="form.content" type="textarea" rows="10" resize="both" />
          </el-tab-pane>
          <el-tab-pane label="Header" name="3">
            <el-input v-model="form.headers" type="textarea" rows="10" resize="both" />
          </el-tab-pane>
          <el-tab-pane label="Check" name="4">
            <el-input v-model="form.check" type="textarea" rows="10" resize="both" />
          </el-tab-pane>
          <el-tab-pane label="Global" name="5">
            <el-input v-model="form.global" type="textarea" rows="10" resize="both" />
            <div class="block">
              <el-slider v-model="form.block" show-input />
            </div>
          </el-tab-pane>
          <el-tab-pane label="Response" name="6">
            <el-input v-model="form.body" type="textarea" rows="10" resize="both" />
          </el-tab-pane>
          <el-tab-pane label="Cookie" name="7">
            <el-input v-model="form.cookie" type="textarea" rows="10" resize="both" />
          </el-tab-pane>
        </el-tabs>
      </el-form-item>