link-wechat-web-pc/src/views/commodityCenter/commodityManage/list.vue

<!-- 模板区域 -->
<template>
  <div>
    <!-- 模板内容 -->
    <el-form ref="queryForm" :inline="true" :model="queryform" label-width="100px" class="top-search">
      <el-form-item label="商品名称" prop="name">
        <el-input v-model="queryform.name" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="name">
        <el-select v-model="queryform.labelName" placeholder="请选择，支持关键词搜索" clearable filterable>
          <el-option label="全部" value="1"></el-option>
          <el-option label="已绑定" value="2"></el-option>
          <el-option label="未绑定" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="findPage()">查询</el-button>
        <el-button @click="resetForm()">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="g-card  ">
      <templateTable ref="commonTable" :operationWidth="200" :SerialShow="true" :showOperation="true"
        :showBatchDelete="false" :data="Result" :columns="Columns" @findPage="findPage">
        <template slot="buttonSlot" slot-scope="{ row }">
          <el-button type="text" @click="viewDetails(row)">查看</el-button>
          <el-button type="text" @click="viewDetails(row)">一键分享</el-button>
        </template>
      </templateTable>
    </div>
  </div>
</template>

<!-- 行为区域 -->
<script>
import templateTable from "@/components/templateTable.vue";
import { Row } from "element-ui";
export default {
  components: {
    templateTable
  },
  // 数据存放区域
  data() {
    return {
      queryform: {},//页面检索对象
      form: {},//提交表单
      rules: {
        labelName: [
          {
            required: true,
            message: '请选择员工',
            trigger: 'chnage',
          },
        ],

      },
      Result: {
        content: [
          {
            name: "3232",
            status: true
          },
          {
            name: "3232",
            status: false
          }
        ],
        totalSize: 100,
      },
      Columns: [
        { prop: "name", label: "商品名称", minWidth: 180, },
        { prop: "name", label: "商品类目", minWidth: 180, },
        { prop: "mobile", label: "价格", minWidth: 180 },
        { prop: "mobile", label: "供应商名称", minWidth: 180 },
        { prop: "mobile", label: "已售", minWidth: 180 },
        { prop: "mobile", label: "状态", minWidth: 180 },
      ],
    }
  },
  // 生命周期函数
  created() {
  },
  // 方法函数
  methods: {
    // 查看详情
    viewDetails() {
    },
    /**
     * 停用
     * @param row status 状态 true 已绑定 false 未绑定
     */
    disableAction(row) {

    },   //列表查询
    findPage() {
      console.log(1)
    },
  },
  // 计算属性
  computed: {
  }
}
</script>
<!-- 样式区域 -->
<style lang='scss' scoped></style>