表单(CRUD)项目相关总结

1.tab切换

2.el-table文本超出显示省略号和hover显示tooltips

HTML

      <el-table-column
        :label="items.name"
        :width="items.width"
        v-for="(items, indexs) in tableTitle"
        :key="indexs"
      >
        <template slot-scope="scope">
          <el-tooltip
            trigger="hover"
            :open-delay="200"
            placement="top"
            effect="light"
            :disabled="showTip"
          >
            <template slot="content">
              <p style="max-width: 260px">{{ scope.row[items.id] }}</p>
            </template>
            <div class="text-show" @mouseover="onShowNameTips">
              {{ scope.row[items.id] }}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>

javascript

    onShowNameTips(e) {
      const target = e.target
      const containerLength = target.clientWidth
      const textLength = target.scrollWidth
      if (textLength > containerLength) {
        // 溢出了
        this.showTip = false
      } else {
        this.showTip = true
      }
    },

CSS

.text-show {
  max-width: 200px;
  overflow: hidden; //超出的文本隐藏
  text-overflow: ellipsis; //溢出用省略号显示
  white-space: nowrap; //溢出不换行
}

3.el-tree使用

HTML

注:在需要反选回显的时候需要主要node-key属性需要保持一致

          <el-checkbox class="select-all-box" v-model="allChecked">
            全选
          </el-checkbox>
          <el-tree
            class="rule_tree"
            :data="organizationData"
            :props="defaultProps"
            :check-strictly="isAssociate"
            node-key="organizationId"
            show-checkbox
            default-expand-all
            :expand-on-click-node="false"
            @check="getCurrentNode"
            ref="tree"
            @node-click="handleNodeClick"
            :key="keys"
          >
          </el-tree>

JavaScript

export default {
  data() {
    return {
      allChecked: false, //是否全选开关
      organizationData: [],  //树结构数据
      checkNodeList:[],//勾选后数组
      defaultProps: {
        children: 'secondLevelDoList',   //这里为二级树数组名称
        label: 'organizationName',
      },
    };
  },
watch: {
    allChecked() {
      if (this.allChecked) {
        this.isAssociate = false
        this.$nextTick(() => {
          this.$refs.tree.setCheckedNodes(this.organizationData)
          this.getCurrentNode()
          this.isAssociate = true
        })
      } else {
        this.$nextTick(() => {
          this.$refs.tree.setCheckedNodes([])
        })
        this.checkNodeList = []
      }
    },
  },
  methods: {
    getCurrentNode() {
      this.checkNodeList = this.$refs.tree.getCheckedNodes()
    },
    handleNodeClick(data, node) {
      console.log(this.$refs.tree.getNode(node).isLeaf, '叶子节点')
    },
     打开编辑窗口() {
        请求树数据接口(){
           (res)=>{
                   if (this.titleInfo === '编辑规则'){
                      this.当前id编辑数据.forEach((item) => {
                      this.$nextTick(() => {
                          this.$refs.tree.setChecked(item.organizationId, true, true)
                      })
                 })
             }
         }
      }
  },
};