# 常用列表展示

列表页面

# 样式 1

只有一个查询条件， renderform 隐藏重置按钮
renderTable 默认每列居中，可排序（当前数据排序）
table 每一行数据的高度控制。（高度不能太大，注意内部组件的影响，比如 button 的 padding）
table 顶部的操作按钮，一律设置 button 的 type 类型，统一 plain 样式，危险操作 type=danger

暂无数据

共 100 条

前往

页

<template>
  <div class="layout-wrapper">
    <jp-render-table
      ref="table"
      :calcHeight="true"
      v-loading="loading"
      :data="tableData"
      :columns="tableColumns"
      @load="doLoad"
      :total="100"
      @row-click="doRowClick"
    >
      <div slot="search">
        <jp-render-form :list="renderList" :formData.sync="formValues"></jp-render-form>
      </div>

      <div slot="action">
        <jp-button type="primary" plain size="mini">新增</jp-button>
        <jp-button type="primary" plain size="mini">修改</jp-button>
        <jp-button type="danger" plain size="mini">删除</jp-button>
      </div>
      <jp-table-column slot="workOrderCode" label="工单单号" align="center" prop="workOrderCode" width="180" fixed="left">
        <template>
          <span>
            <a>1111111111111111</a>
          </span>
          <i class="el-icon-document-copy" :style="{ 'margin-left': '5px' }"></i>
        </template>
      </jp-table-column>
      <jp-table-column align="center" label="操作" slot="opration" width="180" fixed="right">
        <template slot-scope="scope">
          <jp-link type="primary">编辑({{ scope.$index }})</jp-link>
          <jp-link type="danger">删除</jp-link>
        </template>
      </jp-table-column>
    </jp-render-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      tableColumns: [],
      loading: false,
      formValues: {
        name: ''
      },
      renderList: []
    }
  },
  mounted() {
    this.setupColumns()
    this.loadData()
    this.setupRenderList()
  },
  methods: {
    setupRenderList() {
      this.renderList = [
        {
          span: 6,
          type: 'input',
          label: '项目名称',
          prop: 'name'
        },
        {
          slot: 'opration'
        }
      ]
    },
    doRowClick(data) {
      console.log(data)
    },
    setupColumns() {
      this.tableColumns = [
        { type: 'index', label: '序号', width: 60, fixed: 'left' },
        { slot: 'workOrderCode', label: '工单单号' },
        { prop: 'code', label: '商品编码', sortable: false },
        { prop: 'name', label: '商品名称', minWidth: 150 },
        { prop: 'name', label: '商品名称2' },
        { prop: 'name', label: '商品名称3' },
        { prop: 'name', label: '商品名称4' },
        { prop: 'name', label: '商品名称5' },
        { prop: 'owner', label: '货主' },
        { prop: 'barcode', label: '商品条码' },
        { prop: 'money', label: '价格', type: 'money' },
        { slot: 'opration', label: '操作' }
      ]
    },
    loadData() {
      this.$refs.table.reset()
    },
    doLoad(params) {
      console.log(params)
      this.loading = true
      setTimeout(() => {
        this.loading = false
        this.tableData = [
          { code: '1', name: '测试名称', owner: '货主名称', barcode: '121212', money: 12 },
          { code: '12', name: '测试名称22222223333333333333333334', owner: '货主名称1', barcode: '22222', money: 1234 },
          { code: '13', name: '', owner: '货主名称2', barcode: '333333', money: 123456 },
          { code: '14', name: '测试名称4', owner: '', barcode: '444444', money: 12454444444 },
          { code: '15', name: '测试名称5', owner: '货主名称4', barcode: '5555555', money: 1244 },
          { code: '16', name: '测试名称6', owner: '货主名称5', barcode: '66666666666666666', money: 12222222 }
        ]
      }, 1000)
    }
  }
}
</script>

<style scoped lang="scss">
.layout-wrapper {
  .jp-link {
    margin-right: 12px;
    font-size: 12px;
    padding: 0 5px;
  }
}
a:hover {
  text-decoration: none !important;
}
.tip {
  font-size: 14px;
  padding: 12px 12px 12px 0;
}
</style>

# 样式 2

暂无数据

共 100 条

前往

页

<template>
  <div class="layout-wrapper">
    <jp-render-table ref="table" v-loading="loading" :data="tableData" :columns="tableColumns" @load="doLoad" :total="100" @row-click="doRowClick">
      <div slot="search">
        <jp-render-form :list="renderList" :formData.sync="formValues"></jp-render-form>
      </div>

      <div slot="action">
        <jp-button type="primary" plain size="mini">导出</jp-button>
      </div>

      <jp-table-column align="center" label="操作" slot="opration" width="180" fixed="right">
        <template slot-scope="scope">
          <jp-link type="primary">编辑({{ scope.$index }})</jp-link>
          <jp-link type="danger">删除</jp-link>
        </template>
      </jp-table-column>
    </jp-render-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      tableColumns: [],
      loading: false,
      formValues: {
        name: '',
        region: '',
        date: []
      },
      renderList: [
        {
          span: 6,
          type: 'input',
          label: '项目名称',
          prop: 'name'
        },
        {
          span: 6,
          type: 'select',
          label: '项目区域',
          prop: 'region',
          optionList: [
            {
              dictValue: 'sh',
              dictLabel: '上海'
            },
            {
              dictValue: 'bj',
              dictLabel: '北京'
            }
          ],
          on: {
            change: (val) => {
              console.log(val)
            },
            clear: () => {
              console.log('clear')
            }
          }
        },
        {
          span: 12,
          type: 'daterange',
          label: '创建时间',
          prop: 'date'
        },
        {
          span: 24,
          slot: 'opration'
        }
      ]
    }
  },
  mounted() {
    this.setupColumns()
    this.loadData()
  },
  methods: {
    doRowClick(data) {
      console.log(data)
    },
    setupColumns() {
      this.tableColumns = [
        { type: 'index', label: '序号', width: 60, sortable: false },
        { prop: 'code', label: '商品编码', width: 120 },
        { prop: 'name', label: '商品名称', width: 120 },
        { prop: 'owner', label: '货主' },
        { prop: 'owner', label: '货主2' },
        { prop: 'owner', label: '货主3' },
        { prop: 'owner', label: '货主4' },
        { prop: 'owner', label: '货主5' },
        { prop: 'owner', label: '货主6' },
        { prop: 'owner', label: '货主7' },
        { prop: 'barcode', label: '商品条码' },
        { prop: 'money', label: '价格', type: 'money' },
        { slot: 'opration', label: '操作' }
      ]
    },
    loadData() {
      this.$refs.table.reset()
    },
    doLoad(params) {
      console.log(params)
      this.loading = true
      setTimeout(() => {
        this.loading = false
        this.tableData = [
          { code: '1', name: '测试名称', owner: '货主名称', barcode: '121212', money: 12 },
          { code: '12', name: '测试名称22222223333333333333333334', owner: '货主名称1', barcode: '22222', money: 1234 },
          { code: '13', name: '测试名称3', owner: '货主名称2', barcode: '333333', money: 123456 },
          { code: '14', name: '测试名称4', owner: '货主名称3', barcode: '444444', money: 12454444444 },
          { code: '15', name: '测试名称5', owner: '货主名称4', barcode: '5555555', money: 1244 },
          { code: '16', name: '测试名称6', owner: '货主名称5', barcode: '66666666666666666', money: 12222222 }
        ]
      }, 1000)
    }
  }
}
</script>

<style scoped lang="scss">
.layout-wrapper {
  .jp-link {
    margin-right: 12px;
    font-size: 12px;
    padding: 0 5px;
  }
}
a:hover {
  text-decoration: none !important;
}
.tip {
  font-size: 14px;
  padding: 12px 12px 12px 0;
}
</style>

# 样式 3

暂无数据

共 100 条

前往

页

<template>
  <div class="layout-wrapper">
    <jp-render-table ref="table" v-loading="loading" :data="tableData" :columns="tableColumns" @load="doLoad" :total="100" @row-click="doRowClick">
      <div slot="search">
        <jp-render-form :list="renderList" :formData.sync="formValues"></jp-render-form>
      </div>

      <div slot="action">
        <jp-button type="primary" plain size="mini">导出</jp-button>
      </div>

      <jp-table-column align="center" label="操作" slot="opration" width="180" fixed="right">
        <template slot-scope="scope">
          <jp-link type="primary">编辑({{ scope.$index }})</jp-link>
          <jp-link type="danger">删除</jp-link>
        </template>
      </jp-table-column>
    </jp-render-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      tableColumns: [],
      loading: false,
      formValues: {
        name: '',
        region: '',
        date: [],
        check: []
      },
      renderList: []
    }
  },
  mounted() {
    this.setupColumns()
    this.loadData()
    this.setuprenderList()
  },
  methods: {
    setuprenderList() {
      this.renderList = [
        {
          span: 6,
          type: 'input',
          label: '项目名称',
          prop: 'name'
        },
        {
          span: 6,
          type: 'select',
          label: '项目区域',
          prop: 'region',
          optionList: [
            {
              dictValue: 'sh',
              dictLabel: '上海'
            },
            {
              dictValue: 'bj',
              dictLabel: '北京'
            }
          ],
          on: {
            change: (val) => {
              console.log(val)
            },
            clear: () => {
              console.log('clear')
            }
          }
        },
        {
          span: 12,
          type: 'daterange',
          label: '创建时间',
          prop: 'date',
          on: {
            change: (val) => {
              console.log(val)
            },
            clear: () => {
              console.log('clear')
            }
          }
        },
        {
          span: 6,
          type: 'input',
          label: '项目名称',
          prop: 'name'
        },
        {
          span: 6,
          type: 'checkbox',
          label: '',
          prop: 'check',
          checkboxList: [
            {
              label: '主营'
            },
            {
              label: '自营'
            }
          ],
          on: {
            change: (val) => {
              console.log(val)
            }
          }
        },
        {
          span: 6,
          slot: 'opration'
        }
      ]
    },
    doRowClick(data) {
      console.log(data)
    },
    setupColumns() {
      this.tableColumns = [
        { type: 'index', label: '序号', width: 60, sortable: false },
        { prop: 'code', label: '商品编码' },
        { prop: 'name', label: '商品名称' },
        { prop: 'owner', label: '货主' },
        { prop: 'owner', label: '货主2' },
        { prop: 'owner', label: '货主3' },
        { prop: 'owner', label: '货主4' },
        { prop: 'owner', label: '货主5' },
        { prop: 'owner', label: '货主6' },
        { prop: 'owner', label: '货主7' },
        { prop: 'barcode', label: '商品条码' },
        { prop: 'money', label: '价格', type: 'money' },
        { slot: 'opration', label: '操作' }
      ]
    },
    loadData() {
      this.$refs.table.reset()
    },
    doLoad(params) {
      console.log(params)
      this.loading = true
      setTimeout(() => {
        this.loading = false
        this.tableData = [
          { code: '1', name: '测试名称', owner: '货主名称', barcode: '121212', money: 12 },
          { code: '12', name: '测试名称22222223333333333333333334', owner: '货主名称1', barcode: '22222', money: 1234 },
          { code: '13', name: '测试名称3', owner: '货主名称2', barcode: '333333', money: 123456 },
          { code: '14', name: '测试名称4', owner: '货主名称3', barcode: '444444', money: 12454444444 },
          { code: '15', name: '测试名称5', owner: '货主名称4', barcode: '5555555', money: 1244 },
          { code: '16', name: '测试名称6', owner: '货主名称5', barcode: '66666666666666666', money: 12222222 }
        ]
      }, 1000)
    }
  }
}
</script>

<style scoped lang="scss">
.layout-wrapper {
  .jp-link {
    margin-right: 12px;
    font-size: 12px;
    padding: 0 5px;
  }
}
a:hover {
  text-decoration: none !important;
}
.tip {
  font-size: 14px;
  padding: 12px 12px 12px 0;
}
</style>

# 样式 4

每行 4 个组件，默认 foldNum=7，如果前 2 行有占 2 个控件的宽度，比如日期组件，那么需要设置 foldNum 对应-1

暂无数据

共 100 条

前往

页

<template>
  <div class="layout-wrapper">
    <jp-render-table ref="table" v-loading="loading" :data="tableData" :columns="tableColumns" @load="doLoad" :total="100" @row-click="doRowClick">
      <div slot="search">
        <jp-render-form :foldNum="6" :list="renderList" :formData.sync="formValues"></jp-render-form>
      </div>

      <div slot="action">
        <jp-button type="primary" plain size="mini">导出</jp-button>
      </div>

      <jp-table-column align="center" label="操作" slot="opration" width="180" fixed="right">
        <template slot-scope="scope">
          <jp-link type="primary">编辑({{ scope.$index }})</jp-link>
          <jp-link type="danger">删除</jp-link>
        </template>
      </jp-table-column>
    </jp-render-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      tableColumns: [],
      loading: false,
      formValues: {
        name: '',
        region: '',
        date: [],
        check: []
      },
      renderList: []
    }
  },
  mounted() {
    this.setupColumns()
    this.loadData()
    this.setuprenderList()
  },
  methods: {
    setuprenderList() {
      this.renderList = [
        {
          span: 6,
          type: 'input',
          label: '项目名称',
          prop: 'name'
        },
        {
          span: 6,
          type: 'select',
          label: '项目区域',
          prop: 'region',
          optionList: [
            {
              dictValue: 'sh',
              dictLabel: '上海'
            },
            {
              dictValue: 'bj',
              dictLabel: '北京'
            }
          ],
          on: {
            change: (val) => {
              console.log(val)
            },
            clear: () => {
              console.log('clear')
            }
          }
        },
        {
          span: 12,
          type: 'daterange',
          label: '创建时间',
          prop: 'date',
          on: {
            change: (val) => {
              console.log(val)
            },
            clear: () => {
              console.log('clear')
            }
          }
        },
        {
          span: 6,
          type: 'input',
          label: '项目名称',
          prop: 'name'
        },
        {
          span: 6,
          type: 'input',
          label: '项目名称',
          prop: 'name'
        },
        {
          span: 6,
          type: 'input',
          label: '项目名称',
          prop: 'name'
        },
        {
          span: 6,
          type: 'input',
          label: '项目名称',
          prop: 'name'
        },
        {
          span: 6,
          type: 'input',
          label: '项目名称',
          prop: 'name'
        },
        {
          span: 6,
          type: 'input',
          label: '项目名称',
          prop: 'name'
        }
      ]
    },
    doRowClick(data) {
      console.log(data)
    },
    setupColumns() {
      this.tableColumns = [
        { type: 'selection' },
        { type: 'index', label: '序号', width: 60, sortable: false },
        { prop: 'code', label: '商品编码' },
        { prop: 'name', label: '商品名称' },
        { prop: 'owner', label: '货主' },
        { prop: 'owner', label: '货主2' },
        { prop: 'owner', label: '货主3' },
        { prop: 'owner', label: '货主4' },
        { prop: 'owner', label: '货主5' },
        { prop: 'owner', label: '货主6' },
        { prop: 'owner', label: '货主7' },
        { prop: 'barcode', label: '商品条码' },
        { prop: 'money', label: '价格', type: 'money' },
        { slot: 'opration', label: '操作' }
      ]
    },
    loadData() {
      this.$refs.table.reset()
    },
    doLoad(params) {
      console.log(params)
      this.loading = true
      setTimeout(() => {
        this.loading = false
        this.tableData = [
          { code: '1', name: '测试名称', owner: '货主名称', barcode: '121212', money: 12 },
          { code: '12', name: '测试名称22222223333333333333333334', owner: '货主名称1', barcode: '22222', money: 1234 },
          { code: '13', name: '测试名称3', owner: '货主名称2', barcode: '333333', money: 123456 },
          { code: '14', name: '测试名称4', owner: '货主名称3', barcode: '444444', money: 12454444444 },
          { code: '15', name: '测试名称5', owner: '货主名称4', barcode: '5555555', money: 1244 },
          { code: '16', name: '测试名称6', owner: '货主名称5', barcode: '66666666666666666', money: 12222222 }
        ]
      }, 1000)
    }
  }
}
</script>

<style scoped lang="scss">
.layout-wrapper {
  .jp-link {
    margin-right: 12px;
    font-size: 12px;
    padding: 0 5px;
  }
}
a:hover {
  text-decoration: none !important;
}
.tip {
  font-size: 14px;
  padding: 12px 12px 12px 0;
}
</style>

← InputMultiple 多行输入框 JpDateRange 日期区间选择器 →