vue创建动态表格数据

1.HelloWorld.vue<template><div class="tablePage"><table class="table1"><tr class="tr1"><td class="tit td1">统一社会信用代码</td><td class="td...

九亿宅男的梦

5099人浏览 · 2019-05-10 15:00:39

九亿宅男的梦 · 2019-05-10 15:00:39 发布

1.HelloWorld.vue

<template>
  <div class="tablePage">
    <table class="table1">
    <tr class="tr1">
    <td class="tit td1">统一社会信用代码</td>
    <td class="td1"><input class="input1" type="text" title="统一社会信用代码" placeholder="统一社会信用代码"/></td>
    <td class="tit td1">企业名称</td>
    <td class="td1"><input class="input1" type="text" title="企业名称" placeholder="企业名称"/></td>
    <td class="tit td1">企业注册号</td>
    <td class="td1"><input class="input1" type="text" title="企业注册号" placeholder="企业注册号"/></td>
    <td class="tit td1">企业法人名称</td>
    <td class="td1"><input class="input1" type="text" title="企业法人名称" placeholder="企业法人名称"/></td>
    </tr>
    <tr class="tr1">
    <td class="tit td1">法人身份证号</td>
    <td class="td1"><input class="input1" type="text" title="法人身份证号" placeholder="法人身份证号"/></td>
    <td class="tit td1">法人联系电话</td>
    <td class="td1"><input class="input1" type="text" title="法人联系电话" placeholder="法人联系电话"/></td>
    <td class="tit td1">经营范围</td>
    <td class="td1"><input class="input1" type="text" title="经营范围" placeholder="经营范围"/></td>
    <td class="td1" colspan="2"><a href="javascript:;"><input type="button" class="btn input1" value="查  询"/></a></td>
    </tr>
    </table>
    <!-- 表格-->
    <table class="table2">
      <v-table
        :columns="tableConfig.columns"
        :table-data="tableConfig.tableData"
        :paging-index="(pageIndex-1)*pageSize"
      ></v-table>
      <!-- 分页-->
      <v-pagination class="num"
        @page-change="pageChange"
        @page-size-change="pageSizeChange"
        :total="total"
        :page-size="pageSize"
        :layout="['total', 'prev', 'pager', 'next',
         // 'sizer',
          'jumper']"
      ></v-pagination>
    </table>
  </div>
</template>
<script>
  import tableDate from './mock/tableData.js'
  export default {
    data () {
      return {
        pageIndex: 1,
        pageSize: 10,
        total: '',
        tableConfig: {
          tableData: [],
          columns: [
            {
              field: 'id',
              title: '序号',
              width: 80,
              columnAlign: 'center'
            },
            {
              field: 'society',
              title: '统一社会信用代码',
              width: 220,
              columnAlign: 'center'
            },
            {
              field: 'company',
              title: '企业名称',
              width: 350,
              columnAlign: 'center'
            },

            {
              field: 'num',
              title: '企业注册号',
              width: 200,
              columnAlign: 'center'
            },
            {
              field: 'name',
              title: '企业法人名称',
              width: 140,
              columnAlign: 'center'
            },
            {
              field: 'idCard',
              title: '法人身份证号',
              width: 220,
              columnAlign: 'center'
            },
            {
              field: 'tel',
              title: '法人联系电话',
              width: 180,
              columnAlign: 'center'
            },
            {
              field: 'range',
              title: '经营范围',
              width: 180,
              columnAlign: 'center'
            }
          ]
        }
      }
    },
    created () {
      this.getTableData()
    },
    methods: {
      getTableData () {
        this.tableConfig.tableData = tableDate.slice(
          (this.pageIndex - 1) * this.pageSize,
          this.pageIndex * this.pageSize
        );
        this.total = tableDate.length
      },
      pageChange (pageIndex) {
        this.pageIndex = pageIndex;
        this.getTableData();
        console.log(pageIndex)
      },
      pageSizeChange (pageSize) {
        this.pageIndex = 1;
        this.pageSize = pageSize;
        this.getTableData()
      }
    }
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .tablePage {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    margin: 0;
    padding: 0;
    width: 100%;
  }
  .table1{border: 1px solid #ccc;width: 100%; border-collapse:collapse;border-spacing:0;}
  .table1 .tr1{margin: 0px;padding: 0}
  .table1 .td1{border: 1px solid #ccc;margin: 0; height: 40px;padding: 5px;}
  .table1 .tit{text-align: right;background: #eee;}
  .table1 .input1{height: 35px;width: 100%;padding: 0 5px;}
  .table1 .btn{width: 20%;font-size: 16px;border: none;background: red;color: #fff;float: right;}
  .table2{text-align: center;display: block;width: 83%;margin: 20px auto 10px;}
  .num{margin-top: 20px}
</style>

2.tableData.js

export default [
  { 'id': '1', 'society': '123456789123456789', 'company': '公司', 'num': '12345678912345', 'name': '张小花', 'idCard': '123456789123456789','tel':"12345678932" ,'range':'三亚' },
  { 'id': '2', 'society': '123456789123456789', 'company': '公司', 'num': '12345678912345', 'name': '张小花', 'idCard': '123456789123456789' ,'tel':"12345678932",'range':'三亚' },
  { 'id': '3', 'society': '123456789123456789', 'company': '公司', 'num': '12345678912345', 'name': '张小花', 'idCard': '123456789123456789' ,'tel':"12345678932",'range':'三亚' },
  { 'id': '4', 'society': '123456789123456789', 'company': '公司', 'num': '12345678912345', 'name': '张小花', 'idCard': '123456789123456789' ,'tel':"12345678932",'range':'三亚' },
  { 'id': '5', 'society': '123456789123456789', 'company': '公司', 'num': '12345678912345', 'name': '张小花', 'idCard': '123456789123456789','tel':"12345678932" ,'range':'三亚' },
  { 'id': '6', 'society': '123456789123456789', 'company': '公司', 'num': '12345678912345', 'name': '张小花', 'idCard': '123456789123456789' ,'tel':"12345678932",'range':'三亚' },
  { 'id': '7', 'society': '123456789123456789', 'company': '公司', 'num': '12345678912345', 'name': '张小花', 'idCard': '123456789123456789','tel':"12345678932",'range':'三亚'  },
  { 'id': '8', 'society': '123456789123456789', 'company': '公司', 'num': '12345678912345', 'name': '张小花', 'idCard': '123456789123456789','tel':"12345678932",'range':'三亚'  },
  { 'id': '9', 'society': '123456789123456789', 'company': '公司', 'num': '12345678912345', 'name': '张小花', 'idCard': '123456789123456789','tel':"12345678932" ,'range':'三亚' },
  { 'id': '10', 'society': '123456789123456789', 'company': ' 公司', 'num': '12345678912345', 'name': '张小花', 'idCard': '123456789123456789' ,'tel':"12345678932",'range':'三亚' },

  { 'id': '11', 'society': '123456789123456789', 'company': '公司', 'num': '12345678912345', 'name': '张小花', 'idCard': '123456789123456789','tel':"12345678932" ,'range':'三亚' },
  { 'id': '12', 'society': '123456789123456789', 'company': '公司', 'num': '12345678912345', 'name': '张小花', 'idCard': '123456789123456789','tel':"12345678932" ,'range':'三亚' },
  { 'id': '13', 'society': '123456789123456789', 'company': '公司', 'num': '12345678912345', 'name': '张小花', 'idCard': '123456789123456789' ,'tel':"12345678932",'range':'三亚' },
  { 'id': '14', 'society': '123456789123456789', 'company': '公司', 'num': '12345678912345', 'name': '张小花', 'idCard': '123456789123456789' ,'tel':"12345678932",'range':'三亚' },
  { 'id': '15', 'society': '123456789123456789', 'company': '公司', 'num': '12345678912345', 'name': '张小花', 'idCard': '123456789123456789','tel':"12345678932",'range':'三亚'  },
  { 'id': '16', 'society': '123456789123456789', 'company': '公司', 'num': '12345678912345', 'name': '张小花', 'idCard': '123456789123456789','tel':"12345678932",'range':'三亚'  },
  { 'id': '17', 'society': '123456789123456789', 'company': '公司', 'num': '12345678912345', 'name': '张小花', 'idCard': '123456789123456789','tel':"12345678932",'range':'三亚'  },
  { 'id': '18', 'society': '123456789123456789', 'company': '公司', 'num': '12345678912345', 'name': '张小花', 'idCard': '123456789123456789','tel':"12345678932" ,'range':'三亚' },
  { 'id': '19', 'society': '123456789123456789', 'company': '公司', 'num': '12345678912345', 'name': '张小花', 'idCard': '123456789123456789','tel':"12345678932",'range':'三亚'  },
  { 'id': '20', 'society': '123456789123456789', 'company': '公司', 'num': '12345678912345', 'name': '张小花', 'idCard': '123456789123456789','tel':"12345678932",'range':'三亚' }
]

3.App.vue

<template>
  <div id="app">
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin: 0;
  padding: 0;
}
</style>

4.效果图

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^