cv-table-base 常规列表 ¶

简要 ¶

表格组件
常规数据
示例 ¶

::: demo
vue
<template>
  <div>
    <cv-form-inline>
      <cv-form-item>
        <cv-input-text v-model="soData.keyword" placeholder="标题／关键字／描述" />
      </cv-form-item>
      <cv-form-item label="状态" labelWidth="40">
        <cv-select-base v-model="soData.state1" :dataLists="settState" />
      </cv-form-item>
      <cv-form-item label="栏目" labelWidth="40">
        <cv-select-base v-model="soData.state2" :dataLists="settState" />
      </cv-form-item>
      <cv-form-item>
        <cv-select-base v-model="soData.state3" :dataLists="settState" />
      </cv-form-item>
      <cv-form-item>
        <cv-date-range v-model="soData.update" />
      </cv-form-item>
      <cv-form-item>
        <cv-btn-base type="primary" icon="ElIconSearch" @click="$refs.tlEm1.searchSubmit(soData)">搜索</cv-btn-base>
        <cv-btn-base icon="ElIconRefreshLeft" @click="(soData = {}), $refs.tlEm1.searchSubmit()">重置</cv-btn-base>
      </cv-form-item>
    </cv-form-inline>
    <div style="margin-bottom: 20px">
      <cv-btn-base icon="ElIconRefresh" @click="$refs.tlEm1.refresh()">刷新</cv-btn-base>
      <cv-btn-base icon="ElIconPlus" type="primary" @click="jumpsAuth">添加</cv-btn-base>
    </div>
    <cvTableBase
      ref="tlEm1"
      v-model="tableData"
      :tableConfig="tableConfig"
      :tableRefresh="tableRefresh"
      :dataParse="tableDataParse"
      height="350"
    >
      <cvTbColumnIndex label="序号" />
      <cvTbColumnCheck label="选择" />
      <cvTbColumnText label="名称" prop="name" align="center" />
      <cvTbColumnText label="商品ID" prop="title" align="center" />
      <cvTbColumnImg label="图片" prop="title1" align="center" />
      <cvTbColumnText label="商品分类" prop="title2" />
      <cvTbColumnText label="实际销量" prop="title3" />
      <cvTbColumnText label="添加时间" prop="title4" />
      <cvTbColumnText label="商品排序" prop="title5" />
      <cvTbColumnText label="商品状态" prop="title6" />
      <cvTbColumnExpand v-slot="{ row }">
        <div style="display: flex; flex-direction: row">
          <div>
            <span>商品名称：</span>
            <span>{{ row.name }}</span>
          </div>
        </div>
        <cv-form-inline label-position="left">
          <cv-form-item label="商品名称">
            <span>{{ row.name }}</span>
          </cv-form-item>
          <cv-form-item label="所属店铺">
            <span>{{ row.shop }}</span>
          </cv-form-item>
          <cv-form-item label="商品 ID">
            <span>{{ row.id }}</span>
          </cv-form-item>
          <cv-form-item label="店铺 ID">
            <span>{{ row.shopId }}</span>
          </cv-form-item>
          <cv-form-item label="商品分类">
            <span>{{ row.category }}</span>
          </cv-form-item>
          <cv-form-item label="店铺地址">
            <span>{{ row.address }}</span>
          </cv-form-item>
          <cv-form-item label="商品描述">
            <span>{{ row.desc }}</span>
          </cv-form-item>
        </cv-form-inline>
      </cvTbColumnExpand>
      <cvTbColumnBase label="状态" v-slot="{ row }">
        <span v-if="row.ccc == 0" style="color: red; font-size: 18px">×</span>
        <span v-else style="color: green; font-size: 16px">√</span>
      </cvTbColumnBase>
      <cvTbColumnBase label="自定义列" v-slot="{ row }">这里是自定义字段，{{ row.title || '' }}</cvTbColumnBase>
      <cvTbColumnText label="栏目" prop="cat_name" minWidth="120" />
      <cvTbColumnText label="点击量,访问量" prop="count_look" minWidth="120" />
      <cvTbColumnText label="修改时间" prop="update" minWidth="150" />
      <cvTbColumnOpt label="操作" v-slot="{ row }" minWidth="250">
        <cv-btn-text @click="jumpsEdit(row)">编辑</cv-btn-text>
        <cv-btn-text @click="jumpsWinOpen(row.article_link)">访问</cv-btn-text>
        <cv-btn-text @click="jumpsManage(row.article_id)">管理</cv-btn-text>
        <cv-btn-text @click="crudDelItem(row.article_id)">删除</cv-btn-text>
      </cvTbColumnOpt>
    </cvTableBase>
  </div>
</template>
<script>
var testData = [
  { title: 'test', name: 'test222', title1: ['https://f.10yun.com/default/default.png', 'https://f.10yun.com/default/logo.png'] },
  { title: 'test', name: 'test222', title1: 'https://f.10yun.com/default/default.png' },
  { title: 'test', name: 'test222', title1: '' },
  { title: 'test', name: 'test222', title1: 'https://f.10yun.com/default/default.png' },
  { title: 'test', name: 'test222', title1: 'https://f.10yun.com/default/default.png' },
  { title: 'test', name: 'test222', title1: 'https://f.10yun.com/default/default.png' },
  { title: 'test', name: 'test222', title1: 'https://f.10yun.com/default/default.png' },
  { title: 'test', name: 'test222', title1: 'https://f.10yun.com/default/default.png' },
  { title: 'test', name: 'test222', title1: 'https://f.10yun.com/default/default.png' },
  { title: 'test', name: 'test222', title1: 'https://f.10yun.com/default/default.png' }
];
function mockData(param) {
  console.log('请求参数', param);
  let mockData = {
    msg: '请求mock数据成功',
    status: 200,
    pagesize: 10,
    page: 1,
    pagemax: 5,
    total: 50,
    data: testData,
    ...param
  };
  return new Promise((resolve, reject) => {
    try {
      // resolve({
      //   data: d
      //   total: this.data1.length,
      // })
      resolve(mockData);
    } catch {
      reject();
    }
  });
}
export default {
  data() {
    return {
      soData: {},
      settState: [
        { value: '0', label: '全部' },
        { value: '100', label: '审核通过' },
        { value: '5', label: '未审核' },
        { value: '2', label: '禁用' },
        { value: '66', label: '未通过驳回' },
        { value: '99', label: '回收站' }
      ],
      tableData: testData,
      tableRefresh: 0,
      tableConfig: {
        // apiFunc: this.$request.flagGet('TEST_API'),
        // apiFunc: this.$request.urlGet('/test/index'),
        apiFunc: mockData,
        where: {
          test: 1
        }
      }
    };
  },
  methods: {
    tableDataParse(data) {
      for (let i in data) {
        /**
         * 比如时间戳，转日期
         */
        // data[i].date = date(date[i].time);
        /**
         * 比如增加字段
         */
        data[i].title4 = '解析：新增的字段';
      }
      return data;
    },
    jumpsEdit(xxx) {
      console.log(xxx);
    },
    handleClick() {
      console.log(this.$refs.tlEm1);
      this.$refs.tlEm1.refresh();
    },
    jumpsAuth(path) {}
  }
};
</script>
:::
属性 ¶

参数	类型	可选值	默认值	说明
tableConfig	Object	-	-	配置表格，为必传参数
tableRefresh	Nubmber	-	-	表格刷新
dataParse	Function	-	-	数据解析
showPagebreak	Boolean	true / false	true	是否分页
[ tableConfig ]属性说明
参数	说明	类型	可选值	默认值
tablePrimary	主键 `键名`	String	-	-
url	接口地址	String	-	-
apiFunc	接口方法	Function	-	-
where	接口条件	Object	-	-
pageCurr	当前页数	Number	-	1
pageLimit	页长(每页数量)	Number	-	10
request	接口请求字段	Object	-	-
response	接口响应字段	Object	-	-