vuejs常见问题

Posted on | Post modified:
近期针对element-ui的使用过程中的问题

近期针对element-ui的使用过程中的问题

针对table组件中的选择框事件(selection-change)

由于近期碰到需求，需要在页面中渲染一个列表中的多个数据，各个数据都需要使用table组件来渲染，因此这里使用v-for+table组件来渲染。
需要将table中用户选中的行，传入该循环体的某个值，因此需要额外针对selection-change事件传入多的参数
默认的selection-change事件传入的是选中行的数据对象，可以使用$event来代替，后面就可以接额外的参数

1
2
3
4
5
6
7
8
9
10
11
12
13
<el-table
  tooltip-effect="dark"
  class="table-style"
  ref="singleTable"
  highlight-current-row
  border stripe
  @selection-change="unitCheckChange($event, unit.unit_id)"
  :data="unit.host_list">
  <el-table-column
    type="selection"
    width="auto">
  </el-table-column>
</el-table>

针对v-for循环渲染某个select组件，组件绑定值

针对循环使用了多个select的组件情况，可以赋值一个对象或者数组来绑定具体的值

1
2
3
4
5
6
7
8
<el-select v-model="formInline[unit.unit_id]" placeholder="请选择分组">
<el-option
  v-for="item in deployModeList"
  :key="item.id"
  :label="item.desc"
  :value="item.id">
</el-option>
</el-select>

父组件和子组件的相互传递数据

当父组件需要向子组件传递一些参数的时候，可以将要传入的参数放入子组件的props列表中
当子组件需要调用父组件的自定义方法，可以使用$emit来使用

  • 在子组件中定义
1
2
3
4
5
6
7
8
9
<!-- 定义需要使用的参数 -->
export default {
  name: 'deploy-record',
  props: ['dialogFormVisible', 'execRecords', 'req_url'],
  data: function () { return {}}
  methods: {
      close () {
      this.$emit('close')
  }
  • 在父组件中使用子组件
1
2
3
4
5
6
7
<!-- 弹出详情 -->
<deploy-record :dialogFormVisible.sync="dialogFormVisible"
               :task_id="select_unit_id"
               :req_url="reg_url"
               :execRecords="execRecords"
               @close="close">
</deploy-record>

el-table中的选择框默认禁止

使用:selectable='checkboxInit'，定义一个方法返回0，1来实现

1
2
3
4
5
6
checkboxInit(row, index){
     if (xxx) 
       return 0;//不可勾选
     else
       return 1;//可勾选
   },

pre 中高度，宽度的滚动条

  1. style="overflow:auto;max-height: 200px"