123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123 |
- <template>
- <table-page-template>
- <el-form slot='form' :inline='true' :model='formInline' size='mini'>
- <el-form-item label='审批人'>
- <el-input v-model='formInline.user' placeholder='审批人'></el-input>
- </el-form-item>
- <el-form-item label='活动区域'>
- <el-select v-model='formInline.region' placeholder='活动区域'>
- <el-option label='区域一' value='shanghai'></el-option>
- <el-option label='区域二' value='beijing'></el-option>
- </el-select>
- </el-form-item>
- <el-form-item>
- <el-button type='primary' @click='query'>查询</el-button>
- </el-form-item>
- <el-form-item label='审批人'>
- <el-input v-model='formInline.user' placeholder='审批人'></el-input>
- </el-form-item>
- <el-form-item label='备选项'>
- <el-radio-group v-model='radio2'>
- <el-radio :label='3'>备选项3</el-radio>
- <el-radio :label='6'>备选项6</el-radio>
- <el-radio :label='9'>备选项9</el-radio>
- </el-radio-group>
- </el-form-item>
- <el-form-item label='审批人'>
- <el-input v-model='formInline.user' placeholder='审批人'></el-input>
- </el-form-item>
- <el-form-item label='复选框'>
- <el-checkbox-group v-model='checkList' @change='checkListChange'>
- <el-checkbox label='复选框 A'>复选框 1</el-checkbox>
- <el-checkbox label='复选框 B'></el-checkbox>
- <el-checkbox label='复选框 C'></el-checkbox>
- <el-checkbox label='禁用' disabled></el-checkbox>
- <el-checkbox label='选中且禁用' disabled></el-checkbox>
- </el-checkbox-group>
- </el-form-item>
- </el-form>
- <el-table
- slot='table'
- ref='multipleTable'
- :data='tableData3'
- border
- tooltip-effect='dark'
- style='width: 100%'
- @selection-change='handleSelectionChange'
- >
- <el-table-column type='selection' width='55'></el-table-column>
- <el-table-column label='日期' width='120'>
- <template slot-scope='scope'>{{ scope.row.date }}</template>
- </el-table-column>
- <el-table-column prop='name' label='姓名' width='120'></el-table-column>
- <el-table-column prop='address' label='地址' show-overflow-tooltip></el-table-column>
- </el-table>
- <base-pagination :total='456' @pageChanged='pageChanged' slot='pagination'></base-pagination>
- </table-page-template>
- </template>
- <script>
- export default {
- name: 'DemoTable',
- data() {
- return {
- radio2: 3,
- checkList: ['选中且禁用', '复选框 A'],
- formInline: {
- user: '',
- region: ''
- },
- tableData3: [],
- tableData: [
- {
- date: '2016-05-03',
- name: '王小虎',
- address: '上海市普陀区金沙江路 1518 弄'
- },
- {
- date: '2016-05-02',
- name: '王小虎',
- address: '上海市普陀区金沙江路 1518 弄'
- }
- ],
- multipleSelection: [],
- total: 456
- }
- },
- methods: {
- onSubmit() {
- console.log('submit!')
- },
- checkListChange() {
- console.log('checkListChange ' + JSON.stringify(this.checkList))
- },
- handleSelectionChange(val) {
- console.log('handleSelectionChange --> ' + val)
- this.multipleSelection = val
- },
- handleSizeChange(size) {
- console.log('handleSizeChange --> ' + size)
- },
- handleCurrentChange(page) {
- console.log('handleCurrentChange --> ' + page)
- },
- query() {
- this.postJson('/server/getTableData', {}, resp => {
- console.log(resp)
- })
- },
- pageChanged(page, size) {
- console.log('pageChanged size=' + size + ', page = ' + page)
- }
- },
- created() {
- this.$store.dispatch('setBreadcrumb', [{ label: 'Demo' }, { label: 'Table' }])
- for (let i = 0; i < 50; i++) {
- this.tableData3.push({
- date: '2016-05-03',
- name: '王小虎',
- address: '上海市普陀区金沙江路 1518 弄'
- })
- }
- }
- }
- </script>
|