vue2.0使用记录

1. 属性绑定的字符串动态生成

:name="pane_${index}"

2.在新窗口中打开路由

const routerJump = this.$router.resolve({
    path: '/schedule/codeIde',
    query: {
      id,       
    }
})
window.open(routerJump.href, '_blank')

其中query的参数能在浏览器中显示

params传的参数不能在浏览器中显示 2.1.0版本后，使用路由对象的resolve方法解析路由，可以得到location、router、href等目标路由的信息。得到href就可以使用window.open开新窗口了。

3.事件调用

父调子事件：

​

​

4. el-input框不输入内容，点击切换弹出框

<el-input v-model="updateForm.scheduleConf" clearable placeholder="cron表达式..." readonly @click.native="handleSwitch">
  <el-button slot="append" icon="el-icon-edit-outline"></el-button>
</el-input>

今天想写一个table组件，其它的都没问题，在动态生成列时，遇到点小问题卡住了，特此记录一下。

其中列根据columns数组自动创建生成，其它的都好说，操作栏一栏，需要传入用户自定义模板，翻了一遍文档，找到了用法，特记录如下：

4. vue 渲染自定义模板

列定义部分

columns: [{
        label: 'AppName',
        prop: 'appname',        
    }, {
        label: '操作',
        fixed: 'right',
        prop: 'id', 
    template: (h, row) => {
      console.log('行数据', row)
      return (
        <div>
          <el-button type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </div>
      )
    }
}],   

模板调用

<general-table
  ...
  :columns="columns"
>
</general-table>

表格组件代码

<script>
<script>
import Pagination from '@/components/Pagination'

export default {
  name: 'GeneralTable',

  components: {
    pagination: Pagination,
  },

  props: {
    currentPage: {
      required: true,
      type: Number,
      default: 1,
    },
    pageSize: {
      required: true,
      type: Number,
      default: 10,
    },
    totalCount: {
      required: true,
      type: Number,
      default: 0,
    },
    loading: {
      type: Boolean,
      default: false
    },
    limit: {
      type: Number,
      default: 20
    },
    list: {
      type: Array,
      default() {
        return []
      }
    },
    columns: {
      required: true,
      type: Array,
      default() {
        return []
      }
    },    
  },

  methods: {

    handleChangePage(pages) {
      this.$emit('changePage', pages)
    },

    renderPagination(h){
      const { currentPage, pageSize, totalCount, handleChangePage } = this
      return (
        <pagination
          page={currentPage}
          limit={pageSize}
          total={totalCount}
          vOn:pagination={handleChangePage}
        ></pagination>
      )
    },

    renderColumn(h, item, index){
      return h("el-table-column", {
        key: index,
        attrs: {
          type: item.type,
          width: item.width ? `${item.width}` : null,
          label: item.label,
          prop: item.prop,
          fixed: item.fixed ? `${item.fixed}` : null,
        },
        scopedSlots: {
          default: props => {
            if(item.template){
              return item.template(h, props.row)
            }
            return h('span', props.row[item.prop])
          }
        }
      })
    },

    renderTabe(h){
      const { renderPagination, columns, list, loading, renderColumn, indexMethod } = this
      return (
        <div class="table-box">
          <el-table
            border
            data={list}
            v-loading={loading}
          >
            <el-table-column type="index" label="序号" width="50" index={indexMethod}>
            </el-table-column>
            {
             columns.map((item, index) => renderColumn(h, item, index))
            }
          </el-table>
          {renderPagination(h)}      
        </div>
      )
    },

    indexMethod(index) {
      return index + ((this.currentPage - 1) * this.pageSize) + 1
    }

  },

  render(h){
    return this.renderTabe(h)
  }
}

</script>

<style scoped>

</style>