Element-ui使用

el-input 最大值/最小值设置

<!-- 最大10 最小1 -->
<el-input type="number" v-model="main_form.nums" oninput="if(value){value=value.replace(/[^\d]/g,1)} if(value<=0){value=1} if(value>10){value=10}"></el-input>

<!-- 最大10 最小1 可以空 -->
<el-input type="number" v-model="main_form.nums" onchange="if(value){value=value.replace(/[^\d]/g,1);if(value<=0){value=1}} if(value>10){value=10}"></el-input>

禁用table表格指定格子的Checkbox

<template>
  <div>
    <el-table :data="tableData" @selection-change="handleSelectionChange">
      <el-table-column type="selection" :selectable="selectableState"></el-table-column>
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="unit" label="单位"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      selection_data: []
    }
  },
  methods: {
    // 返回false禁用，返回true启用
    selectableState(row) {
      const state = row.name === 'test'
      return !state
    },
    // 选择的数据
    handleSelectionChange(val) {
      this.selection_data = val
    },
  }
}
</script>

隐藏table表格指定格子

<div class="middle">
  <el-table :data="tableData" border :cell-class-name="hideSpread">
    <el-table-column type="index" label="#"></el-table-column>
    <el-table-column type="expand"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
  </el-table>
</div>

<script>
methods: {
  // 隐藏展开符
  hideSpread(row) {
    if (row.row.name === '张三') return 'myCell'
    else return ''
  }
}
</script>

<style lang="less" scoped>
.myCell {
  .el-table__expand-icon {
    display: none;
  }
}
</style>

在外部触发el-popover组件

<template>
  <div>
    <el-button @click="showPopover = !showPopover">Toggle Popover</el-button>
    <!-- 加上trigger="manual"属性即可外部触发 -->
    <el-popover v-model="showPopover" trigger="manual">
      <p>Content of the popover</p>
    </el-popover>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showPopover: false,
    };
  },
};
</script>

table表格重新赋值整行数据

// 获取表格数据源
let tableData = this.tableData;
// 获取需要修改的行的索引
let rowIndex = 0;
// 获取需要修改的行的数据对象
let rowData = { name: 'test', age: '18' }
// 将rowData数据对象重新赋值给表格数据源中对应的行
this.$set(tableData, rowIndex, rowData);

处理 el-table-column 中自动将双空格处理为单空格的默认行为

在 Element-UI 的 el-table-column 中自动将双空格处理为单空格是该组件的默认行为。如果你需要保留双空格，可以通过使用插槽（slot）来实现自定义渲染。

<template>
  <el-table :data="tableData">
    <el-table-column label="姓名">
      <template slot-scope="{row}">
        <span v-html="preserveWhitespace(row.name)"></span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John  Smith' },
        { name: 'Jane  Doe' },
      ],
    };
  },
  methods: {
    preserveWhitespace(text) {
      return text.replace(/ /g, '&nbsp;'); // 使用 HTML 实体 &nbsp; 替换空格
    },
  },
};
</script>

同页面多table组件互相影响问题

给每个table添加key即可

<el-table :data="tableData" key="table1">
  <el-table-column type="expand">
    <template slot-scope="{row}">
      <span>{{row.age}}</span>
    </template>
  </el-table-column>
  <el-table-column prop="id" label="id"></el-table-column>
  <el-table-column prop="name" label="name"></el-table-column>
</el-table>

<el-table :data="tableData2" key="table2">
  <el-table-column prop="id" label="id"></el-table-column>
  <el-table-column prop="name" label="name"></el-table-column>
</el-table>